清除浮动小结

Question

使用div+css布局比较灵活，而在使用过程中经常性地会使用到float，那么清除浮动就是必须要做的，而且随时性地对父级元素清除浮动的做法也被认为是书写CSS的良好习惯之一。

下面是针对css浮动清除的一些做法：

1:

1.   .left{float:left;}  
2.    .right{float:right;}  
3.    .cl{clear:both;}  
4. <div class="left"></div>
5. <div class="right"></div>
6. <div class="cl"></div>或者<p class="cl"></p>

复制代码2

1. #content{overflow:auto; zoom:1}
2.    .left{float:left;}  
3.    .right{float:right;}  
4.   
5.    <div id="content">
6.     <div class="left"></div>
7.      <div class="right"></div>
8.   </div>

复制代码其中zoom:1"用于兼容IE6。

3：使用after伪对象清楚浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。
一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；
二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为"."。

1. #content:after{display:block;clear:both;content:"";visibility:hidden;height:0;}  
2.     .left{float:left;}  
3.     .right{float:right;}  
4. <div id="content">
5.     <div class="left"></div>
6.      <div class="right"></div>
7.   </div>

复制代码三者应该灵活运用，综合比较下来 方法二是比较合适的方法。

此为参考网上资料并结合自己编写的方法来总结的，仅为自己学习。