总结清除浮动方法大全（7种）

1）添加额外标签

这是在学校老师就告诉我们的 一种方法，通过在浮动元素末尾添加一个空的标签例如

<div style=”clear:both”></div>，

其他标签br等亦可。

再如：

<div class="warp" id="float1">
<h2>1）添加额外标签</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>

优点：通俗易懂，容易掌握

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。

2）使用 br标签和其自身的 html属性

这个方法有些小众，br 有 clear=“all | left | right | none” 属性 。

如：

<h2>2）使用 br标签和其自身的 html属性</h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
<br clear="all" />
</div>
<div class="footer">.footer</div>

优点：比空标签方式语义稍强，代码量较少

缺点：同样有违结构与表现的分离，不推荐使用

3)父元素设置 overflow：hidden

通过设置父元素overflow值设置为hidden；在IE6中还需要触发 hasLayout ，例如 zoom：1；

<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
<h2>3)父元素设置 overflow </h2>
<div class="main left">.main{float:left;}</div>
<div class="side left">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了

4)父元素设置 overflow：auto 属性

同样IE6需要触发hasLayout，演示和3差不多

优点：不存在结构和语义化问题，代码量极少

缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等, 请看 嗷嗷的 Demo ,不要使用

5）父元素也设置浮动

优点：不存在结构和语义化问题，代码量极少

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

6）父元素设置display:table

优雅的 Demo

优点：结构语义化完全正确，代码量极少

缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用

7）使用:after 伪元素

需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多清除浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

该方法源自于: How To Clear Floats Without Structural Markup

如：

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

优点：结构和语义化完全正确,代码量居中

缺点：复用方式不当会造成代码量增加

小结

通过对比，我们不难发现，其实以上列举的方法，无非有两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

其二，通过设置父元素 overflow 或者display：table 属性来闭合浮动，我们来探讨一下这里面的原理。

在CSS2.1里面有一个很重要的概念，但是国内的技术博客介绍到的比较少，那就是 Block formatting contexts （块级格式化上下文），以下简称 BFC。

CSS3里面对这个规范做了改动，称之为：flow root，并且对触发条件进行了进一步说明。

那么如何触发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 为此被设为了 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)

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

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

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

hasLayout更详细的解释请参见 old9翻译的 大名鼎鼎的 《On having layout》。