float造成父级元素塌陷的问题

解决方法有4种类:

1.在使用浮动的元素后面加一个div，属性设置为style="clear: both" ，但增加了额外的html代码。

2.在使用浮动元素的父级容器加属性overflow:hidden，这种方法在你添加下拉选项等操作时会将下拉的选项隐藏掉，这种场合下不适用。

3.父元素设置display: table，改变了盒模型的属性，会出现其他问题。

4、给父级容器加一个class="clearfix"，完美解决：

.clearfix:after {

    display:block;

    content:"clear";

    clear:both;

    line-height:0;

    visibility:hidden;

}

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

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

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

(4) 通过content:""生成内容作为最后一个元素，至于content里面是点还是其他都是可以的

(5) zoom:1触发IE hasLayout。

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