1.1为什么要清除浮动

image.png

由于父级盒子很多情况下，不方便给高度，但是滋贺子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。

1.2清除浮动的本质

• 清除浮动的本质是清除浮动元素造成的影响
• 如果父盒子本身有高度，则不需要清除浮动
  -清楚浮动之后，父级就会根据浮动的滋贺子自动检测高度。父级有了高度，就不会影响下面的标准流了。

1.3清除浮动

选择器{clear:属性值;}

• 实际开发过程中，几乎只用clear:both

1.4清除浮动的方法

1、额外标签法也称为隔墙法，是W3C推荐的做法。
2、父级添加overflow属性
3、父级添加after伪元素
4、父级添加双伪元素

1.41额外标签法

额外标签法会在浮动元素末尾添加一个空的标签。
在最后一个浮动盒子的后面新建一个盒子如下用于堵住浮动的盒子。

   .clear{
            clear:both;
            }

  <div class="box">
        <div class="left"></div>
        <div class="right"></div>
        <div class="clear"></div>
    </div>

优点：通俗易懂，方便书写
缺点：添加许多无意义的标签，结构化较差
注意：要求这个新的空标签必须是块级元素（如：span就不行）

1.42 父级添加overflow

可以给父级添加overflow，将其属性值设置为hidden、auto或scroll。
优点：代码简洁
缺点：无法显示溢出部分

1.43 ：after伪元素法

:after方式是额外标签法的升级版，也是给父元素添加。在css中增加如下为元素，之后在父元素增加clearfix标签。

       .clearfix:after{
               content:"";
               display:block;
               height:0;
               clear:both;
               visibility:hidden;
         }
       /*IE6、7专有*/
       .clearfix{
             *zoom:1;
            }

优点：没有增加标签，结构更简单
缺点：照顾低版本浏览器
代表网站：百度、淘宝网、网易等

1.44：双伪元素清除浮动

也是给父元素添加

.clearfix:before,
        .clearfix:after{
            content:"";
            display:table;
        }
        .clearfix:after{
            clear:both;
        }
        .claerfix{
            *zoom:1;
        }

优点：代码更简洁
缺点：照顾低版本浏览器
代表网站：小米、腾讯等