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;
}