clearfix改良及overflow:hidden详解

最新推荐文章于 2025-05-17 10:02:22 发布

转载最新推荐文章于 2025-05-17 10:02:22 发布 · 553 阅读

文章标签：

#wrapper #浏览器 #扩展 #ie #html #div

css技术专栏收录该内容

83 篇文章

订阅专栏

本文探讨了改进clearfix技术并对其进行了增强，同时详细解释了overflow:hidden在清除浮动时的作用及注意事项。通过实例展示了如何避免跨浏览器兼容问题，并提供了在特定情况下的替代方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

原文: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外面的左上角，并没有被隐藏）。

更好的选择

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

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