CSS清除浮动的本质以及清除浮动的方法

清除浮动的本质

清除浮动元素脱离标准流造成的影响 策略： 闭合浮动，只让浮动在父盒子内部受影响，不影响父盒子外面的其它盒子 浮动演示：

<style>
    .box-father {
        width: 1000px;
        border: 1px solid black;
    }

    .box-child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

    .footer {
        height: 30px;
        background-color: brown;
    }
</style>

<div class="box-father">
    <div class="box-child">盒子</div>
    <div class="box-child">盒子</div>
</div>
<div class="footer"></div>

额外标签法

在浮动元素尾部添加一个空的标签,这个标签只能是块级元素，不能是行内元素：

<div class="box-father">
    <div class="box-child">盒子</div>
    <div class="box-child">盒子</div>
    <div style="clear: both"></div>
</div>
<div class="footer"></div>

overflow属性

给父元素添加overflow属性，将其属性设置为hidden、auto或scroll都可以，缺点是无法显示溢出的部分：

.box-father {
            width: 1000px;
            border: 1px solid black;
            overflow: hidden;
        }

after伪元素

:after是额外标签的升级版，给父元素添加即可：

.box-father:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /*IE6、7专有*/
        .box-father {
            *zoom: 1;
        }

例如：

<style>
    .box-father:after {
        content: "";
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    /*IE6、7专有*/
    .box-father {
        *zoom: 1;
    }

    .box-father {
        width: 1000px;
        border: 1px solid black;
    }

    .box-child {
        float: left;
        width: 100px;
        height: 100px;
        background-color: aqua;
    }

    .footer {
        height: 30px;
        background-color: brown;
    }
</style>

<div class="box-father">
    <div class="box-child">盒子</div>
    <div class="box-child">盒子</div>
</div>
<div class="footer"></div>

双伪元素

 .box-father:before,
        .box-father:after {
            content: "";
            display: table;
        }

        .box-father:after {
            clear: both;
        }

        .box-father {
            *zoom: 1;
        }