当我们使用float:left后,发现父级元素的div没有被撑开了. 通常情况下要清理浮动.
解决办法:
先设置代码为:
1 .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
这样我们只要对父级div引入这个clearfix的类即可,即
<div class="clearfix" >
<ul style="float:left">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
这个css的原理是经过使用after伪对象,它将在应用clearfix的元素结尾添加content中的内容,也就是一个".",并且把他设置为块级元素(display="block");高度设置为0,clear="both",然后将其内容隐藏掉(visibility="hidden").这样就会撑开此块级元素.
但是,IE并不支持.所以如果你需要兼容IE浏览器的话,可以设定以个Hack.
如下:
.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
* html .clearfix {zoom: 1;}
*html .clearfix{ height:1%;}
*+html .clearfix{ height:1%;}
这样我们就可以只在父级div引用class类解决了繁琐的清空步骤.