css之浮动清除

浮动的清除

浮动的性质: 脱标 贴边 字围 收缩

1. 给浮动的元素的祖先元素加高度（不常用）

   如果一个元素要浮动，那么它的祖先元素一定要有高度。高度的盒子，才能关住浮动。

2. clear:both
   cleat就是清除，both指的是左右浮动都要清除。
   缺点：margin失效

3. 隔墙法
   在两个浮动的元素中间，建一个墙。隔开两部分浮动，让后面的浮动元素，不去追其那面的浮动元素。

       <div>
           <p></p>
           <p></p>
       </div>
       <div class="cl h10"></div>
       <div>
           <p></p>
           <p></p>
       </div>
   

缺点:第一个div还是没有高度

4. 内墙法

       <div>
           <p></p>
           <p></p>
           <div class="cl h10"></div>
       </div>
       <div>
           <p></p>
           <p></p>
       </div>
   

   优点: 不仅能够使后部分的p不去追前面的p,并且能让第一个div撑出高度.

5. overflow:hidden
   一个父亲,不能被自己的浮动的儿子撑出高度.但是,如果给这个父亲加上了overflow:hidden;那么这个父亲就能够被浮动的儿子撑出高度.这个现象,不能解释.就是浏览器的小偏方.
   并且它能够让margin 生效.

浏览器兼容问题

1. IE6不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大.
   解决办法: 将盒子的字号,设置小(小于盒子的高).比如0px;

height:4px;
_font-size:0px;

IE6专有属性: 只要给css属性之前,加上下划线.

2. IE6 不支持用overflow:hidden 来清除浮动
   解决办法: 以毒攻毒,追加一条 _zoom:1 ;
   完整写法:

  overflow:hidden;
  _zoom:1;

_zoom:1; 能够触发IE6浏览器的hasLayout机制