清除浮动的4种方法

CSS处理浮动的几种方法~

• 为什么要清除浮动
  • 清除浮动的方法

1.为什么清除浮动

  有的内容多且相同的板块，这种情况下设置高度是不现实的。例如淘宝，京东的商品推荐页面。使用浮动该内容就会按顺序排列，不需要再设置高度了。

  浮动本质是让元素浮在盒子上面，装浮动的盒子目的就是给浮动的元素一个区域，但是不设置高度会导致浮动所在盒子的高度为零，下一块的内容就会到浮动元素的下面，被盖住，这也就是脱离文档流。

  清除浮动就能使元素不脱离文档流。

  

2.清除浮动的4种方法：

 -1.额外标签法（隔墙法）：在浮动的元素后面加一个块级元素，给这个块级元素clear：both；
    缺点：造成框架有冗余代码
    
 - 2.  overflow：hidden；  放在浮动的父标签里，实际上是利用了溢出
      缺点：溢出的部分会被隐藏。
        
 -3. ：after伪元素法：      简单理解，就是CSS给添加了一个盒子在这个盒子里清除浮动，所以类似额外标签法。与额外标签法的区别：伪元素法不在HTML里添加盒子
    CSS代码段：
    .clearfix:after{
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*这是针对于IE6/7的，因为IE6/7不支持:after伪类*/
    }
    
 -  4. 双伪元素：也是CSS在父盒子的前面和后面都加上盒子用来清除浮动
     CSS代码段：
    .clearfix:after,.clearfix:before{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;
    }

  
   今天的学习到这就结束啦~