【记录】CSS3 为什么要清除浮动&清除浮动的四个方法

需要清除浮动的原因：

• 父盒子不需要固定高度，让内部盒子撑开父盒子。
• 子盒子浮动，脱离了标准流，导致父盒子塌陷，影响整体外观。

在标准流下，父盒子默认会被子盒子撑开：

像上面一样，绿色的盒子撑开了蓝色父级盒子.
可如果我们给绿色盒子加上了浮动样式，就会变成这样：

父级盒子内由于子盒子脱离了标准流，父盒子也没有指定高度，造成盒子塌陷。

解决方法:利用clear属性进行清除浮动的操作 :

P.S:浮动的盒子只会压住在他之后的标准流盒子,而不会压住标准流盒子内的图片和元素:

如下:

这是因为浮动最初的用途是做图文的环绕排版效果的,只需要在img标签中加入浮动即可实先图文混排

清除浮动方法常用的有四种：

原理：

额外标签法：
原理：通过在浮动盒子末尾使用额外的盒子标签来“堵住”浮动标签，防止标签“跑出父级”：
代码样例：

<style>
    .bigbox {
        width: 100%;
        background-color: blue;
    }
    .box {
        float: left;
        width: 100px;
        height: 50px;
        background-color: green;
    }
    .clear {
        clear: both;
    }
</style>
<div class="bigbox">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="clear"></div>
</div>

父级overflow:hidden;:
原理：通过触发BFC方式，实现闭合浮动(先记下来)
代码样例：

<style>
/*html代码同上*/
    .bigbox {
        width: 100%;
        background-color: blue;
        overflow: hidden;
    }
    .box {
        float: left;
        width: 100px;
        height: 50px;
        background-color: green;
    }
</style>

父级after伪元素法:
原理：在父盒子尾部创建子盒子拦住浮动盒子实现闭合浮动(先记下来)
代码样例：

<style>
/*html代码同上*/
    .bigbox {/*这里的class名一般取为clearfix*/
        zoom: 1; /*IE浏览器兼容*/
    }
    .bigbox:after {
        content: "."";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }
</style>

父级before和after双伪元素:
原理：使用前后两个盒子拦住浮动盒子实现清除浮动(先记下来)
代码样例：

<style>
    /*html代码同上*/
    .bigbox:after,
    .bigbx:before {/*这里的class名一般取为clearfix*/
        content: "";
        display: table;
    }
    .bigbox:after {
        clear: both;
    }
    .bigbox {
        *zoom: 1;
        /*IE浏览器兼容*/
    }
</style>