css 闭合浮动的方法
什么是浮动？
最简单的解释，浮动可以使得多个块级元素可以放置在同一行上。
普通流
很多人或者文章称之为文档流或者普通文档流，其实标准里根本就没有这个词。如果把文档流直译为英文就是 document flow，但标准里只有另一个词，叫做普通流（normal flow)，或者称之为常规流。但似乎大家更习惯文档流的称呼，因为很多中文翻译的书就是这么来的。比如《CSS Mastery》，英文原书中至始至终都只有普通流 normal flow（普通流）这一词，从来没出现过 document flow（文档流）。
浮动
浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。
正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为 0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。
清除浮动与闭合浮动的区别
清除浮动是被浮动影响的元素（不是设置浮动的元素）去清除，利用clear:both去清除浮动，并不能解决设置浮动的元素产生的高度坍塌的问题。
闭合浮动是包含浮动元素的父元素去闭合浮动，从而达到避免浮动带来影响的效果。
所以我们要做的其实是闭合浮动而不是清除浮动。
如何正确闭合浮动
1. 添加额外标签
通过在浮动元素末尾添加一个空的标签例如 <div class=”clear”></div>，其他标签 br 等亦可。例如：
优点：通俗易懂，容易掌握
缺点：会增加很多无意义的标签。可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。
2. 使用br标签和其自身的html属性
优点：比空标签方式语义稍强，代码量较少
缺点：同样有违结构与表现的分离，不推荐使用
3. 父元素设置 overflow
通过设置父元素 overflow 值设置为 hidden；在 IE6 中还需要触发 hasLayout，例如 zoom：1；
优点：不存在结构和语义化问题，代码量极少
缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04 年 POPO 就发现 overflow:hidden 会导致中键失效。
4. 父元素设置 overflow ：auto
同样 IE6 需要触发 hasLayout，演示和 3 差不多
优点：不存在结构和语义化问题，代码量极少
缺点：多个嵌套后，Firefox 某些情况会造成内容全选；IE 中 mouseover 造成宽度改变时会出现最外层模块有滚动条等
5. 父元素也设置浮动
优点：不存在结构和语义化问题，代码量极少
缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到 body，不推荐使用。
6. 父元素设置display:table
优点：结构语义化完全正确，代码量极少。
缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失，不推荐使用。
7. 使用:after伪元素
由于 IE6-7 不支持:after，使用 zoom:1 触发 hasLayout。
优点：结构和语义化完全正确,代码量居中。
缺点：复用方式不当会造成代码量增加
推荐使用第七种方法：
在css文件中添加以下代码
/* 适应IE浏览器 使用 zoom:1 触发 hasLayout */
.clearfix {
*zoom: 1;
}
.clearfix::after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
display:block 使生成的元素以块级元素显示，占满剩余空间;
height:0 避免生成内容破坏原有布局的高度；
visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互；
通过 content:"."生成内容作为最后一个元素，至于 content 里面是点还是其他都是可以的，Firefox 直到 7.0 content: "" （空内容）仍然会产生额外的空隙；
zoom：1 触发 IE hasLayout。
clear：both 用来闭合浮动
在html文件中，设置了浮动的元素的父元素的类中加上clearfix，即可达到闭合浮动的效果。