清除浮动--子元素float导致父元素height塌陷解决方案

li写float浮动的时候，ul的height不会被li的height撑起来，ul的height就会为0.这样就会导致页面布局混乱，达不到你想要的效果。

方法1:

在li标签最后加一个空<li></li>：

没有宽高，只有一个css属性：

clear:both;

方法2:

给父元素ul的css添加：

overflow:auto;

zoom:1;//兼容IE浏览器

方法3:

写给父元素：

zoom:1;//兼容IE浏览器

:after{clear:both;content:'.';display:block;width: 0;height: 0;visibility:hidden;}

方法3（直接把方案2单独写到一个class里）:

class名clearfix写给父元素ul

/*清除浮动*/
.clearfix{
display: inline-block;
}
.clearfix:after{
display: block;
content:' ';
height:0;
width:0;
line-height: 0;
clear: both;
visibility: hidden;
}