[译]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 *.

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

「大众点评点餐」小程序开发经验 03:事件联动

李超,美团点评前端开发工程师,2 年 web 开发经验,现在是美团点评点餐团队的一员。

15240
来自专栏前端架构与工程

初探React与D3的结合-或许是visualization的新突破?

自诞生之初截止目前(2016年初),React可以说是前端界最流行的话题,如果你还不知道React是何物,你就该需要充充电了。 d3是由纽约时报工程师开源的一个...

32470
来自专栏Guangdong Qi

iOS开发常用之网络

16110
来自专栏双十二技术哥

Android性能优化(二)之布局优化面面观

通过《Android性能优化(一)之启动加速35%》我们获得了闪电般的App启动速度,那么在应用启动完毕之后,UI布局也会对App的性能产生比较大的影响,如果布...

12030
来自专栏非著名程序员

Android 自定义倒计时 View

2016年08月01日新的一周开始了,一篇自定义倒计时View开启了这周的篇章… ---- 国际惯例,效果图如下; ? 带阴影带指引点的倒计时View,不要被...

30190
来自专栏MasiMaro 的技术博文

从项目中学习HTML+CSS

最近由于工作原因以及自己的懈怠,已经很久都没有更新过博客了。通过这段时间,我发现坚持一件事情是真的很难,都说万事开头难,但是在放弃这件事上好像开头了后面就顺理成...

48720
来自专栏腾讯社交用户体验设计

你离高效制作动画只差一篇文章的距离

18220
来自专栏Android-JessYan

骚年你的屏幕适配方式该升级了!-smallestWidth 限定符适配方案

原文地址: https://www.jianshu.com/p/2aded8bb6ede

11120
来自专栏青玉伏案

视错觉:从一个看似简单的自定义控件说起

为什么要写今天这篇博客那就说来话长了,那是在一个大雪纷飞的冬天……然后……。好了,不扯淡了,直接进入今天的主题吧,这篇博客是关于iOS自定义组件的东西。一些UI...

21160
来自专栏程序员宝库

神奇的选择器 :focus-within

有个错误有必要每次讲到伪类都提一下,有时你会发现伪类元素使用了两个冒号 (::) 而不是一个冒号 (:),这是 CSS3 规范中的一部分要求,目的是为了区分伪类...

11620

扫码关注云+社区

领取腾讯云代金券