clearfix:after 的用法
想要清除浮动就要在父元素上 加上 clearfix:after
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容;
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间,只是看不到而已;
line-height: 0; <----行高为0;
height: 0; <----高度为0;
font-size:0; <----字体大小为0;
}
.clearfix
{ *zoom:1;}
<----这是针对于IE6的,因为IE6不支持:after伪类,这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素。具体意思的话,不用深究,听说微软的工程师自己都无法解释清楚。height:1%效果也是一样。
clearfix:after 的用法的更多相关文章
- css清除浮动clearfix:after的用法详解
如果外部有一个div容器,其内部div容器设置了float样式,则外部的容器div因为内部没有clear,导致不能撑开.解决方法: CSS代码: 复制代码 代码如下: .clearfix:after ...
- clearfix的最佳方案----在路上(22)
clearfix的纠结 骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.cle ...
- 解读浮动闭合最佳方案:clearfix
.clear{clear:both;height:0;overflow:hidden;} 上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题. ...
- Clearing Floats清除浮动--clearfix的不同方法的使用概述
清除浮动早已是一个前端开发人员必学的一课.毫无疑问,多年来,我们已经接触过多种清除浮动的方法,现在“clearfix methods”越来越被大家熟知.在深入剖析“clearfix”的多种用法之前,我 ...
- 浮动闭合最佳方案:clearfix
之前给大家介绍两种浮动闭合的办法CSS清除浮动 万能float闭合,得知很多同学都在使用下面的骨灰级解决办法: .clear{clear:both;height:0;overflow:hidden;} ...
- PC-常见问题-清除浮动
常用:.clear{clear:both;height:0px;overflow:hidden;}>最优浮动闭合方案(这是我们推荐的): .clearfix:after{content:&quo ...
- 【css】清除浮动(clearfix 和 clear)的用法
本文主要是讲解如何在 html 中使用 clearfix 和 clear,针对那些刚开始了解 css 的童鞋.关于 clearfix 和 clear 的样式在这里我就不写了,具体样式点击此处. 下面就 ...
- clearfix的用法(转)
clearfix的用法 (2013-12-31 10:41:24) 标签: clearfix 清除浮动 clearboth height zoom 分类: 网页制作 如果有一个DIV作为外部容器,内部 ...
- css中clearfix清除浮动的用法及其原理示例介绍
clearfix的定义: .clearfix:after {}{ content: "."; /**//*内容为“.”就是一个英文的句号而已.也可以不写.*/ display: b ...
随机推荐
- 洛谷P5055 可持久化文艺平衡树 (可持久化treap)
题目链接 文艺平衡树的可持久化版,可以使用treap实现. 作为序列使用的treap相对splay的优点如下: 1.代码短 2.容易实现可持久化 3.边界处理方便(splay常常需要在左右两端加上保护 ...
- Kendo UI使用教程:Bower Packages
[Kendo UI最新试用版下载] Kendo UI目前最新提供Kendo UI for jQuery.Kendo UI for Angular.Kendo UI Support for React和 ...
- SpringBoot 1.x 之入门
1 SpringBoot简介 SpringBoot简化Spring应用开发,约定大于配置,去繁从简,just run就能创建一个独立的,产品级别的应用. 背景: J2EE笨重的开发.繁多的配置.低下的 ...
- yang学习
Ø Yang 是对NETCONF数据模型.操作进行建模,覆盖NETCONF协议的操作层和内容层 Ø 模块和子模块 模块是yang中定义的基本单位. 模块定义单个数据模型,它可以定义完整的聚合模型, ...
- 【python基础】元组方法汇总
一.定义 用于存储一组数据的有序序列, 一旦创建, 元组中的各个元素不允许修改 二.特点 1.元组有序; 2.元组是不可变的数据类型;不可修改; 3.元组中可以存储重复的数据; 4.元组中可以同时存储 ...
- iOS画线段
CGContextRef context = UIGraphicsGetCurrentContext(); //设置线条类型 CGContextSetLineCap(context, kCGLineC ...
- AQS源码分析笔记
经过昨晚的培训.对AQS源码的理解有所加强,现在写个小笔记记录一下 同样,还是先写个测试代码,debug走一遍流程, 然后再总结一番即可. 测试代码 import java.util.concurre ...
- 使用Swagger自动生成文档
1.maven依赖 maven仓库(https://mvnrepository.com/)搜索springfox <!-- https://mvnrepository.com/artifact/ ...
- html caption标签 语法
html caption标签 语法 caption是什么标签? 作用:定义表格标题. 说明:caption 标签必须紧随 table 标签之后.您只能对每个表格定义一个标题.通常这个标题会被居中于表格 ...
- TTTTTTTTTTT LA 4329 BIT模版
题意: 有n个打乒乓球的人,住在一排房子内,以房子的顺序从做到由,每个人都有一个不同的乒乓球等级ai.每次比赛需要三人,两人比赛和一人裁判,裁判必须居住在两个比赛者之间,且等级必须也在两个人之间.问最 ...