清除浮动 VS 闭合浮动

清除浮动只是为了让后面的元素不受前面浮动元素高度塌陷的影响，但并不能解决浮动元素的塌陷问题。

闭合浮动确切的含义是让浮动元素自己闭合，从而清除了高度塌陷。

所以，我们为了解决高度塌陷的问题，严格意义上还是要使用闭合浮动。

那么现在就把闭合浮动的所有方法总结一下，并分析一下他们的优缺点。然后找出当下最适合的闭合浮动的方法（时间紧张的同学可以直接跳到最后 Orz）。

1）在浮动元素末尾添加额外标签

a.添加空标签 `<div>`

示例：

<div class="clearfix">
    <div class="left"></div>
    <div class="right"></div>
    <div style="clear:both;"></div>
</div>
<div class="footer"></div>

这是最早也是最简单的闭合浮动的方法。但是在现在看来，这个方法会徒增许多无意义的空标签，有违结构与表现的分离，所以不推荐。

b.使用 `<br>` 标签

示例：

<div class="clearfix">
    <div class="left"></div>
    <div class="right"></div>
    <br clear="all">
</div>
<div class="footer"></div>

这个方法比较小众，<br> 标签自带有 html 属性 clear ，他有三个可选值：left、right 和 all。他比 <div> 空标签的语义稍强，但他同样有违结构与表现的分离，所以也不推荐。

2）为父元素添加属性 overflow / float / display

这里涉及到一个知识点：BFC（ Block formatting contexts ）
BFC：全称块级格式化上下文。用于对块级元素排版，默认情况下只有根元素（body）一个块级上下文。使元素具有包裹性，并且子元素的布局不会影响父元素布局。当触发以下条件时，会为块级元素生成一个独立的块级上下文：

float 除了 none 以外的值

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

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

position（absolute，fixed）

fieldset 元素

BFC 的特性：

BFC 会阻止外边距叠加
正常情况下，同一个 BFC 下两个子块级元素的垂直方向 margin 会发生叠加，而两个不同的 BFC 下的子元素之间就不会发生这种情况。

BFC 不会重叠浮动元素
浏览器会给 BFC 创建隐式的 margin 来阻止他和其子浮动元素的 margin 叠加

BFC 通常可以包含浮动
BFC 下的子浮动元素也会参与高度计算

a.overflow: hidden

示例：

<div class="clearfix" style="overflow:hidden; *zoom:1;">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

通过为父元素添加 overflow 属性并设置值 hidden，在IE6中还需要触发 hasLayout ，例如 zoom：1；然后使其变为一个 BFC，只要没有为父元素设置固定高度，浮动元素就会被包含在内，从而完成浮动的闭合。
不过这个方法在内容增多时可能会导致内容被裁剪，因此建议少用。

b.overflow: auto

示例：

<div class="clearfix" style="overflow:auto; *zoom:1;">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

这个方法在多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等；firefox早期版本会无故产生focus等；因此也不建议使用。

c.float

在父元素上同样加上浮动属性也可以闭合浮动，但是这样会使与父元素相邻的元素布局受到影响，总不能一直浮动到 body，因此也不推荐使用。

d.display: table

示例：

1
2

改变了父盒子的属性，可能因此造成一系列问题，不推荐使用。

3）为父元素添加伪元素

示例：

<div class="clearfix">
    <div class="left"></div>
    <div class="right"></div>
</div>
<div class="footer"></div>

.clearfix::before,.clearfix::after {
    content: "";  //content可以任意发挥
    display: table; //使生成的元素以块级元素显示,占满剩余空间
}
.clearfix::after {
    clear: both;
}
.clearfix {
    zoom: 1; //触发 IE hasLayout
}

这个方法就是通过 ::before 和 ::after 伪元素在浮动元素直接父元素的两端添加了一个空元素，并且设置 display 为 table，生成 BFC，这样上方的 ::before 可以防止上边距折叠，再给下方 ::after 设置 clear: both 用于闭合浮动，这个方法代码量十分简洁，语义化完全正确，而且可以进行封装复用，因此十分推荐。此方法参考原文：A new micro clearfix hack

小结

总共分析了 7 种闭合浮动的方法，并找出了最符合语义化，同时被各大浏览器所接受的方法——使用伪元素。因此，为了避免不必要的 bug，以及方便后期的维护，希望大家都能用起来。