[译]clearfix改良及overflow:hidden详解

原文: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的盒子内部元素的垂直边距被扩展到盒子之外)。有一个demo页面解释了这个问题。

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

因此,为了创建跨浏览器兼容的同样的盒模型布局,我们可以把原来的清除浮动的方法改良一下,采用伪类: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外面的左上角,并没有被隐藏)。

 

更好的选择

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

selector {
    display: inline-block;
    width: ;
}

 

引申阅读

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

本条目发布于。属于CSS分类,被贴了 标签。
               

[译]clearfix改良及overflow:hidden详解》上有9条评论

  1. Pingback引用通告: 大家觉得哪种清除浮动的方法好? - web前端 - 开发者问答

  2. pyjama

    Hi can I use a few lines here in this post if I provide a link back to your site?

  3. Pingback引用通告: 探討css grids與各種clearfix方法及優缺點 : 湯姆熊遊樂世界

  4. pyjama

    Hi can I use a few lines here in this post if I provide a link back to your site? Sandra :-)

  5. Pingback引用通告: 自适应的两栏图文混排改进 | 所谓技术 - 裁纸刀下

  6. Pingback引用通告: 自适应的图文混排 « 99css

  7. Pingback引用通告: Tweets that mention 翻译:clearfix改良及overflow:hidden详解 | 乱七八糟 - 裁纸刀下 -- Topsy.com

评论已关闭。