[译]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 *.
- 号外!号外!Python纳入高考内容了!人工智能时代就要来临了!
- 高颜值!域名5h.net和jb.cc纷纷易主
- 认识ASP.NET 5项目结构和项目文件xproj
- weblogic下部署应用时slf4j与logbak冲突的解决办法
- 介绍一位OWin服务器新成员TinyFox
- javascript: 带分组数据的Table表头排序
- 域名资讯:昨日域名成交2897个,成交额达300多万元
- 2017年12月编程语言排行榜:C语言再次崛起,有望成为2017年度编程语言
- WordPress 免插件仅代码实现 Gravatar 头像缓存
- Spring JDBCTemplate使用JNDI数据源
- 大家之前是不是误解了DC/OS与Kubernetes之间的关系
- CentOS 7 上部署Mono 4 和Jexus 5.6
- maven学习(下)利用Profile构建不同环境的部署包
- AS3初学者容易迷糊的几个问题
- 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 数组属性和方法
- PHP生成Mysql数据字典
- .Net Core in Docker极简入门(上篇)
- PHP一个比较完善的树形结构代码
- .Net Core in Docker极简入门(下篇)
- snoopy(强大的PHP采集类) 详细介绍
- 十分钟搭建自己的私有NuGet服务器-BaGet
- PHP遍历文件夹下的所有文件和文件夹
- Python 读写 csv 文件的三种方法
- 初识ABP vNext(1):开篇计划&基础知识
- 利用 urllib.request.urlretrieve 函数下载文件
- PHP中class.smtp类
- 解决PIL切圆形图片存在锯齿
- [Go] GO语言实战-为博客园增加gofly在线客服功能
- PHP表单提交参数验证类(可修改)
- Tensorflow MNIST CNN 手写数字识别