[译]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: ;
}
引申阅读
- 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 *.
- java中如何初始化接口
- 你和PPT高手之间,就只差一个iSlide
- 如何在原生微信小程序中实现数据双向绑定
- 追溯 React Hot Loader 的实现
- 【推荐】开源项目minapp-重新定义微信小程序的开发
- 【完结汇总】iKcamp出品基于Koa2搭建Node.js实战共十一堂课(含视频)
- hadoop性能调优
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 规范与部署
- iKcamp|基于Koa2搭建Node.js实战(含视频)☞ 错误处理
- DiscuzX v3.4 任意文件删除漏洞
- 系列3|走进Node.js之多进程模型
- Java中Arraylist与linkedlist的区别
- 手把手教你撸一个 Webpack Loader
- HashMap与HashTable区别
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- JavaScript开发中的常用代码参考
- rabbitmq主题订阅
- AI算法让图片动起来,深情演唱Unravel
- python 学习笔记(1)——python中的lambda函数用法
- SpringBoot过滤器的简单使用
- SpringBoot拦截器的简单使用
- dotNET Core:编码规范
- K8s——Ingress-nginx原理及配置
- Java的类加载器
- 如何启动HiveServer2
- dotnet 如何调试 SmartSql 的实际执行 SQL 语句
- dotnet 关于 SmartSql 的 SQL 语句的属性替换前缀说明
- 为什么java初学者要学习一点前端技术?
- Expedition (POJ 2431)
- java JVM 报C [libresolv.so.2+0x7e7d] __libc_res_nquery+0x4dd 解决