如何清除浮动--原理及方法

一、为什么要清除浮动

因为在很多情况下，父盒子是不方便设置高度的，而浮动的元素本身又不占位置（性质），在这种情况下，为了避免浮动的盒子对下面标准流的盒子的布局造成影响，因此需要清除浮动。

二、清除浮动的方法

第一种：额外标签法（W3C推荐）

优点：结构比较简单

缺点：很繁琐，每次使用都需要添加一次，会加大工作量

<div class="box">

    <div class="damao">大毛</div>

    <div class="ermao">二毛</div>
     <div class="clear"></div>
        </div>

它的样式为

.box {
width: 800px; border: 1px solid black; margin: 0 auto;

    }

    .damao {
        width: 300px；
        height: 200px;
        float: left;
    }

    .ermao {

        width: 200px;
        height: 200px;
        float: left;
    }

    .clear {
        clear: both;
    }

在最后一个浮动元素的末尾加一个空的（块元素）标签

第二种：给父级添加overflow:hidden;

优点：代码简单

其样式为

.box { overflow: hidden; width: 800px; border: 1px solid black; margin: 0 auto； }

第三种：添加伪元素选择器（强化版额外标签法）

优点：不需要增加额外的标签，结构比较清晰简单

注意：content: "";是使用伪元素选择器必须要写的 因为clearfix是类，所以父级直接引用就可以了

<div class="box clearfix"></div>

其样式为

  .clearfix::after {

        content: "";

        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    .clearfix {
        /* IE6、7 专有 */
        *zoom: 1;
    }
    

第四种：双伪元素清除浮动

优点：代码更加简单

使用语法和伪元素选择器使用语法相同

<div class="box clearfix"> </div>

其样式为

 .clearfix:before,

    .clearfix::after {

        content: "";
        display: table;
    }

    .clearfix::after {
        clear: both;
    }

    .clearfix {
        /* IE6、7 专有 */
        *zoom: 1;
    }
    

到这里，清除浮动的基本原理和方法已经讲完了。其实只要多敲代码，“熟能生巧”，慢慢的就能掌握和灵活运用清除浮动的各种方法。如有不足，请在评论区中指正！