清除浮动小结

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

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

1:

   .left{float:left;}  

   .right{float:right;}  

   .cl{clear:both;}  

<div class="left"></div>

<div class="right"></div>

<div class="cl"></div>或者<p class="cl"></p>

2

  #content{overflow:auto; zoom:1}

   .left{float:left;}  

   .right{float:right;}  

  

   <div id="content">

    <div class="left"></div>

     <div class="right"></div>

  </div>

其中zoom:1"用于兼容IE6。

3：使用after伪对象清楚浮动。该方法只适用于非IE浏览器。具体写法可参照以下示例。使用中需注意以下几点。

一、该方法中必须为需要清除浮动元素的伪对象中设置height:0，否则该元素会比实际高出若干像素；

二、content属性是必须的，但其值可以为空，蓝色理想讨论该方法的时候content属性的值设为"."。

 #content:after{display:block;clear:both;content:"";visibility:hidden;height:0;}  

    .left{float:left;}  

    .right{float:right;}  

 <div id="content">

    <div class="left"></div>

     <div class="right"></div>

  </div>

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

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