新清除浮动clearfix 与 overflow:hidden [译]

旧的清除浮动clearfix只用到:after伪类，会导致容器的垂直外边距因没有block formatting context而重叠叠加的问题。

详细请查看《Block Formatting Context 块级元素格式化上下文 》中的应用说明

 

How to "patch" clearfix so it can better handle collapsing margins

 

positioniseverything

Vertical margins do not collapse in IE (< 8), but in other browsers the top margin does.

       在positioniseverything网站中有提到，垂直上外边距margin-top在IE6，IE7下不会重叠叠加，也就是说容器的内部元素的外边距margin-top是应用在容器的上边界，margin-top在容器的内部，而非作用于容器外部的元素。应用margin-top的元素与容器之间有距离；

      而其它标准浏览器则会重叠叠加，即margin-top是作用于容器外部的元素，而不是作用于容器的上边界，应用margin-top的元素与容器之间没有距离。

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix { zoom: 1; } /* IE 5.5/6/7 */

 

 

 

perishablepress

Vertical margins do not collapse in IE (< 8), but in other browsers both margins collapse.

       在perishablepress网站中有提到，如果在上面代码基础上再添加font-size:0，那么，垂直方向外边距margin-top和margin-bottom在IE6，IE7下不会重叠叠加，而其它标准浏览器则会重叠叠加

.clearfix:after {
  visibility: hidden;
  display: block;
  font-size: 0;
  content: " ";
  clear: both;
  height: 0;
}
.clearfix { zoom: 1; } /* IE 5.5/6/7 */

 

 

tjkdesign

Vertical margins do not collapse across browsers.

    在tjkdesign网站中，添加了:before伪元素，这样浏览器渲染时容器的子元素的外边距就不会重叠叠加了。在容器盒模型的内部。

.clearfix:before,
.clearfix:after {
  content: ".";    
  display: block;    
  height: 0;    
  overflow: hidden;	
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE 5.5/6/7 */

 

 

原文:clearfix Reloaded + overflow:hidden Demystified

 

clearfix 和 overflow:hidden 可算得上是不增加额外标签清除浮动的两个最流行的技术了。

这篇短文介绍了如何改进clearfix进行增强，同时对overflow:hidden进行了深入的解释。

 

clearfix

曾经在网上流行的一种clearfix的方法：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

 

      在作者的另一篇文章 everything you know about clearfix is wrong 中，他介绍了这种方法在跨浏览器兼容时会造成的问题，并建议仅对不邻近浮动元素的元素应用clearfix（例如弹出窗口），

尽管这样做我们还需要处理由clearfix造成的边距折叠bug（译者注：指clearfix的盒子内部元素的垂直边距被扩展到盒子之外）。

     

       该页面中最开始的两个盒模型的边距叠加行为（底边距保留在盒子内部，顶边距则到了盒子外部）说明：生成的内容将盒子内部元素的边距保留保留在了盒子内部，而在其它浏览器下边距将被扩展到盒子边缘之外。

因此，为了创建跨浏览器兼容的同样的盒模型布局，我们可以把原来的清除浮动的方法改良一下，采用伪类:before 和 :after：

.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

 

       如此一来可以使顶边距和底边距都保留在盒子内部，符合w3c关于垂直边距叠加的说明。但是不要在现有的项目中简单地用这些代码替换你的clearfix规则，否则可能会与你原来为了解决边距重叠问题采取的解决方案产生冲突。

 

overflow

在众多关于清除浮动的讨论中，出现了overflow:hidden的方法，并且这种方法总是被“如果你把绝对定位元素置于div内部，这些元素（超出的部分）将会被隐藏”的观点击败。但事实并非如此。overflow:hidden 会修剪相对定位（position:relative）的元素，但并不总是会隐藏绝对定位元素。这是因为是否隐藏绝对定位元素实际上取决其包含块（containing block）：

10.1 "containing block" 的定义：

 

4. If the element has ‘position:absolute’, the containing block is established by the nearest ancestor with a ‘position’ of ‘absolute’, ‘relative’, or ‘fixed’. …

翻译：如果一个元素有"position:absolute"的定义，则其包含块由最近的拥有"position:absolute|relative|fixed"属性的祖先元素确定。…

 

       这意味着一个带有overflow:hidden样式的盒子，它所包含的绝对定位子元素如果溢出，并不会被隐藏——除非该绝对定位元素的包含块（containing block）就是这个盒子本身或位于该盒子内部。也就是说，如果这个绝对定位元素的包含块的层级高于拥有overflow:hidden样式的盒子，那么这个盒子里面的绝对定位元素不会被截断或隐藏。

      作者提供了一个demo 页面演示这个原理（页面上的wrapper设定了overflow:hidden，但是绝对定位的子元素box1却显示在了wrapper外面的左上角，并没有被隐藏）。

(若代码引用外部js，运行后需刷新一次才能执行)

 

 

更好的选择

如果你可以对包含浮动的元素应用宽度，那么更好的办法是用下面的样式来清除浮动：

display: inline-block;
width: <any explicit value>;

 

 

引申阅读

• Contained Floats, enclosing floats with pure CSS known as the clearfix technique
• How To Clear Floats Without Structural Markup
• The New Clearfix Method
• 10.1 Definition of "containing block"

关于作者: Thierry Koblentz 是 Yahoo! 的一位前端工程师。他负责的项目有 TJK Design 和 ez-css.org. 你可以在twitter上follow他： @thierrykoblentz .

 原文链接：http://www.ipmtea.net/css_ie_firefox/201107/31_525.html