清除浮动全面解读（摘自网摘那些年我们一起清除过的浮动）_html/css_WEB-ITnose

一、清除浮动和闭合浮动

　　所谓清除浮动，是指显示上正确。避免了文档流自动包裹浮动元素的特性（常见的是footer部分设置clear:both;属性）；

而闭合浮动，是确实解决了高度塌陷的问题，使得wrap元素具有了高度。可疑包裹进浮动的元素。所以说，称之为闭合浮动更为合适。

二、闭合浮动的原理

　　常用的清除浮动方法有许多，可分为两类

1. 在浮动元素末尾添加空元素，设置clear:both属性
2. 父元素设置overflow或者display:table;

　　那么其中的原理是什么呢，在这之前需要先了解一下hasLayout 和 Block formatting contexts。

所谓Block formatting contexts是指块级格式化上下文，简称BFC。

那么如何触发BFC呢？

float 除了none以外的值 
 

overflow 除了visible 以外的值（hidden，auto，scroll ） 
 

display (table-cell，table-caption，inline-block) 
 

position（absolute，fixed） 
 

fieldset元素

需要注意的是，display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC，换句话说，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过display:table和display:table-cell创建的BFC效果是不一样的。

 fieldset 元素在www.w3.org里目前没有任何有关这个触发行为的信息，直到HTML5标准里才出现。有些浏览器bugs（Webkit，Mozilla）提到过这个触发行为，但是没有任何官方声明。实际上，即使fieldset在大多数的浏览器上都能创建新的块级格式化上下文，开发者也不应该把这当做是理所当然的。CSS 2.1没有定义哪种属性适用于表单控件，也没有定义如何使用CSS来给它们添加样式。用户代理可能会给这些属性应用CSS属性，建议开发者们把这种支持当做实验性质的，更高版本的CSS可能会进一步规范这个。

 

BFC的特性：

1)块级格式化上下文会阻止外边距叠加

当两个相邻的块框在同一个块级格式化上下文中时，它们之间垂直方向的外边距会发生叠加。换句话说，如果这两个相邻的块框不属于同一个块级格式化上下文，那么它们的外边距就不会叠加。

2)块级格式化上下文不会重叠浮动元素

根据规定，一个块级格式化上下文的边框不能和它里面的元素的外边距重叠。这就意味着浏览器将会给块级格式化上下文创建隐式的外边距来阻止它和浮动元 素的外边距叠加。由于这个原因，当给一个挨着浮动的块级格式化上下文添加负的外边距时将会不起作用（Webkit和IE6在这点上有一个问题??可以看这 个测试用例）。 

3)块级格式化上下文通常可以包含浮动

详见： W3C CSS2.1 - 10.6.7 'Auto' heights for block formatting context roots 
  

通俗地来说：创建了 BFC的元素就是一个独立的盒子，里面的子元素不会在布局上影响外面的元素，反之亦然，同时BFC任然属于文档中的普通流。

至此，您或许明白了为什么 overflow:hidden或者auto可以闭合浮动了，真是因为父元素创建了新的BFC。对于张鑫旭在对《overflow与zoom”清除浮动”的一些认识 》一文中对于用包裹来解释闭合浮动的原理，我觉得是不够严谨的，而且没有依据。并且说道“Firefox等浏览器并没有haslayout的概念”，那么现代浏览器是有BFC的，从表现上来说，hasLayout 可以等同于 BFC。

IE6-7的显示引擎使用的是一个称为布局（layout）的内部概念，由于这个显示引擎自身存在很多的缺陷，直接导致了IE6-7的很多显示 bug。当我们说一个元素“得到 layout”，或者说一个元素“拥有 layout” 的时候，我们的意思是指它的微软专有属性 hasLayout http://msdn.microsoft.com/worksh ... rties/haslayout.asp 为此被设为了 true 。IE6-7使用布局的概念来控制元素的尺寸和定位，那些拥有布局（have layout）的元素负责本身及其子元素的尺寸设置和定位。如果一个元素的 hasLayout 为false，那么它的尺寸和位置由最近拥有布局的祖先元素控制。

触发hasLayout的条件：

position: absolute 
 

float: left|right 
 

display: inline-block 
 

width: 除 “auto” 外的任意值 
 

height: 除 “auto” 外的任意值 （例如很多人清除浮动会用到 height: 1%  ） 
 

zoom: 除 “normal” 外的任意值 (MSDN) http://msdn.microsoft.com/worksh ... properties/zoom.asp 
 

writing-mode: tb-rl (MSDN) http://msdn.microsoft.com/worksh ... ies/writingmode.asp

在 IE7 中，overflow 也变成了一个 layout 触发器：

overflow: hidden|scroll|auto （ 这个属性在IE之前版本中没有触发 layout 的功能。 ）
 

overflow-x|-y: hidden|scroll|auto （CSS3 盒模型中的属性，尚未得到浏览器的广泛支持。他们在之前IE版本中同样没有触发 layout 的功能）

IE8使用了全新的显示引擎，据称不使用 hasLayout属性了，因此解决了很多深恶痛绝的bug。

综上所述：

在支持BFC的浏览器（IE8+，firefox，chrome，safari）通过创建新的BFC闭合浮动；

在不支持 BFC的浏览器 （IE6-7），通过触发 hasLayout 闭合浮动。

三、闭合浮动方法??精益求精

上面已经列举了7种闭合浮动（第七种即：after伪元素）的方法，通过第三节分析的原理，我们发现其实更多的：display：table- cell，display：inline-block等只要触发了BFC的属性值都可以闭合浮动。从各个方面比较，after伪元素闭合浮动无疑是相对比 较好的解决方案了，下面详细说说该方法。

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { *zoom:1; }

1) display:block 使生成的元素以块级元素显示,占满剩余空间;

2) height:0 避免生成内容破坏原有布局的高度。

3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;

4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；

5）zoom：1 触发IE hasLayout。

通过分析发现，除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他版本的闭合浮动为什么会有font-size：0，line-height：0。

 

精益求精方案一：

相对于空标签闭合浮动的方法代码似乎还是有些冗余，通过查询发现Unicode字符里有一个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; }

.clearfix { *zoom:1; }.

精益求精方案二：

由Nicolas Gallagher 大湿提出来的,原文:A new micro clearfix hack，该方法也不存在firefox中空隙的问题。

/* For modern browsers */

.cf:before,.cf:after {

content:"";

display:table;

}

.cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */

.cf { zoom:1; }

 需要注意的是：

上面的方法用到了  ：before伪元素，很多人对这个有些迷惑，到底我什么时候需要用before呢？为什么方案一没有呢？其实它是用来处理margin边距重叠的，由于 内部元素 float 创建了BFC，导致内部元素的margin-top和 上一个盒子的margin-bottom 发生叠加。如果这不是你所希望的，那么就可以加上before，如果只是单纯的闭合浮动，after就够了！并不是如同大漠《Clear Float》一文所说的：但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug，这不是bug，是BFC应该有的特性。

请看优雅的Demo

进一步了解请看： 《clearfix改良及overflow:hidden详解【译】》

在实际开发中，改进方案一由于存在Unicode字符不适合内嵌CSS的GB2312编码的页面，使用方案7完全可以解决我们的需求了，改进方案二 等待大家的进一步实践。方案3、4通过overflow闭合浮动，实际上已经创建了新的 块级格式化上下文，这将导致其布局和相对于浮动的行为等发生一系列的变化，清除浮动只不过是一系列变化中的一个作用而已。所以为了闭合浮动去改变全局特 性，这是不明智的，带来的风险就是一系列的bug，比如firefox 早期版本产生 focus，截断绝对定位的层等等。始终要明白，如果单单只是需要闭合浮动，overflow就不要使用，而不是某些文章所说的“慎用”。

前前后后花了三天写完了这篇文章。如果觉得本文对您有帮助，您的留言就是对我最大的支持，同时由于精力有限，欢迎指出文中错误与不足，共勉之！

参考资料:

 

Page breaks and block-formatting contexts: Allowed page breaks (13.3.3)

Clearfix and block formatting contexts: Everything you Know about Clearfix is Wrong

Block formating contexts, “hasLayout” ? IE Window vs CSS2.1 browsers: simulations.

New block formatting contexts next to floats

Control Block Formatting Context

On having layout， [译文]On having layout  http://old9.blogsome.com/2006/04/11/onhavinglayout

“HasLayout” Overview

hasLayout Property

IE hasLayout

https://developer.mozilla.org/en/CSS/block_formatting_context

 

 

转自：http://www.iyunlu.com/view/css-xhtml/55.html