CSS使用float:left后需要clear:both清空的处理方法

当我们使用float:left后,发现父级元素的div没有被撑开了. 通常情况下要清理浮动.这也是现在所使用的方法，即CSS中float:left后需要clear:both清空. 如

<div>

 <ul style="float:left">

 <li><a href="#">1</a></li>

 <li><a href="#">2</a></li>

 <li><a href="#">3</a></li>

</ul> <!--需要清理浮动--> <div style="clear:both"></div>

</div>
　　

用了很久这样的方法，每次写Repeater绑定的时候都要加个<div style="clear:both"></div>的标签,以前没有注意到这方面的东西.今天重新写样式的时候,就上网搜了下替代的方法.果然在Google中搜到了一篇How To Clear Floats Without Structural Markup的文章,灵活的处理了清空浮动的问题

首先设置代码为
.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;}

 

 这样我们就可以只在父级div引用class类解决了繁琐的清空步骤.

 下面给出别的网站清空浮动的代码
/* 豆瓣的clear both方式 */

.clearfix:after { content: “.”; display: block; height: 0; clear: both; visibility: hidden }

.clearfix { zoom: 1; display: inline-block; _height: 1px }

*html .clearfix { height: 1% }

*+html .clearfix { height: 1% }

.clearfix { display: block }/*虾米的方式*/

.clearfix:after{content:”.”; display:block; height:0; clear:both; visibility:hidden;}

.clearfix{zoom:1;}