本文转自:http://sofish.de/1791
清理浮动有很多种方式,像使用 br 标签自带的 clear 属,使用元素的 overflow,使用空标签来设置 clear:both
等等。但考虑到兼容问题和语义化的问题,一般我们都会使用如下代码来清理浮动。
/* 清理浮动 */
.clearfix:after {
visibility:hidden;
display:block;
font-size:0;
content:" ";
clear:both;
height:0;
}
.clearfix {
zoom:1;
}
其原理是,在「高级」浏览器中使用 :after 伪类在浮动块后面加上一个非 display:none 的不可见块状内容来,并给它设置
clear:both 来清理浮动。在 ie6 和 7 中给浮动块添加 haslayout 来让浮动块撑高并正常影响文档流。
上面的代码应该是现在主流的清理浮动方式。现在支付宝就使用这样的方式。而现在,Nicolas Gallagher 给出了一个更简洁的方案
:
.cf:before, .cf:after {
content:"";
display:table;
}
.cf:after {
clear:both;
}
.cf {
zoom:1;
}
原理还是一样的。使用 :after 伪类来提供浮动块后的 clear:both。不同的是,隐藏这个空白使用的是 display:
table。而不是设置 visibility:hidden;height:0;font-size:0; 这样的 hack。
值得注意的是这里中的 :before 伪类。其实他是来用处理 top-margin 边折叠的,跟清理浮动没有多大的关系。但因为浮动会创建
block formatting context,这样浮动元素上的另而一元素上如果刚好有 margin-bottom
而这个浮动元素刚好有margin-top 的话,应该让他们不折叠(虽然这种情况并不常见)。
分享到:
相关推荐
css中3种清除浮动方法css中3种清除浮动方法
浮动的原理 ,介绍清除浮动几种方法。以及margin塌陷的产生和解决margin的塌陷的方法
浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊端,那就是当子元素设置了float属性之后,且父元素的宽度没有设置...所以这里我们说的清除浮动,指的是清除子盒子添加浮动效果后造成的父盒子高度塌陷。
COME-IN FROM 导航条字体加粗 清除浮动 minyout 4.390v.
浮动的属性虽然方便使用,但是在使用这种属性时,也存在着一种弊端,那就是当子元素设置了float属性之后,且父元素的宽度没有设置...所以这里我们说的清除浮动,指的是清除子盒子添加浮动效果后造成的父盒子高度塌陷。
NULL 博文链接:https://onestopweb.iteye.com/blog/2316146
div+css清除浮动
清除浮动的几种方法.md
我们为何要清除浮动?清除浮动的原理是什么?本文将一步一步地深入剖析其中的奥秘,让浮动使用起来更加得心应手。 一、清除浮动 还是 闭合浮动 (Enclosing float or Clearing float)? 很多人都已经习惯称之为清除...
css清除浮动大全--------共8种方法
做xhtml+css页面重构的人员很注重的一点就是浮动,而浮动最头痛的就是如何清除。文件是我整理的3种清除浮动的方法,3种方法各有优缺点,页面重构师需要结合使用
清除CSS浮动 CSS清除浮动_2种方法源代码.zip
清除浮动的几种方法PPT学习教案.pptx
清除浮动是每一个 web前台设计师必须掌握的机能。css清除浮动大全,共8种方法。 浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。而且同样的代码,在各种浏览器中...
CSS技术:清除浮动的最优方法.pdf
因为Zoom属性是IE浏览器的专有属性,所以他清除浮动作用只适用于IE浏览器,而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用...
通过本文,让大家可以明白清除浮动的原理和几种方法,最后得出一种本文认为最好用的方法。 二、 内容简介 1、 引入,还原浮动本来的意义 2、 说明,实际开发中常用浮动来做什么 3、 提问,为什么要清除浮动 4、 回答...
清除浮动就是指解决浮动元素溢出容器的操作,其方法多种多样,这里我们来看最基本的一种:CSS的clear属性清除浮动的基本用法示例
DIV+CSS 清除浮动是页面布局中常见的问题,相信各位高手也都有自己的方法,今天在这里对常见的几种方法进行总结(PS:谈不上是原创,这里是我自己做的归纳总结,也是我自己内化的过程),希望对您能够有所帮助。...
如何清除浮动? 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow:hidden;} #test为浮动元素的父元素。zoom:1也可以替换为固定的width或height 方法3...