面试官：清除浮动有哪些诶。

都1202年了，老掉牙的东东了，现在谁还用浮动鸭！

1. 额外标签法

 <style>
        .father {
            width: 400px;
            border: 1px solid deeppink;
        }

        .big {
            width: 200px;
            height: 200px;
            background: darkorange;
            float: left;
        }

        .small {
            width: 120px;
            height: 120px;
            background: darkmagenta;
            float: left;
        }

        .footer {
            width: 900px;
            height: 100px;
            background: darkslateblue;
        }

        .clear {
            clear: both
        }
    </style>
    
    <div class="father">
        <div class="big">big</div>
        <div class="small">small</div>
        <div class="clear">额外标签法</div>
    </div>
    <div class="footer"></div>

2. BFC

<style>
        .father {
            width: 400px;
            border: 1px solid deeppink;
            overflow: hidden;
        }

        .big {
            width: 200px;
            height: 200px;
            background: darkorange;
            float: left;
        }

        .small {
            width: 120px;
            height: 120px;
            background: darkmagenta;
            float: left;
        }

        .footer {
            width: 900px;
            height: 100px;
            background: darkslateblue;
        }
    </style>
    
    <div class="father">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

3. 父元素定义高度

 <style>
        .father {
            width: 400px;
            height: 1000px;
            border: 1px solid deeppink;
        }

        .big {
            width: 200px;
            height: 200px;
            background: darkorange;
            float: left;
        }

        .small {
            width: 120px;
            height: 120px;
            background: darkmagenta;
            float: left;
        }

        .footer {
            width: 900px;
            height: 100px;
            background: darkslateblue;
        }
    </style>
    
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

4. 使用after伪元素清除浮动

<style>
        .father {
            width: 400px;
            border: 1px solid deeppink;
        }

        .big {
            width: 200px;
            height: 200px;
            background: darkorange;
            float: left;
        }

        .small {
            width: 120px;
            height: 120px;
            background: darkmagenta;
            float: left;
        }

        .footer {
            width: 900px;
            height: 100px;
            background: darkslateblue;
        }

        /* 伪元素是行内元素 正常浏览器清除浮动的方法 */
        .clearfix::after {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* IE6清除浮动的方式  *号只有IE6-IE7执行，其他浏览器不执行 */
        .clearfix {
            *zoom: 1;
        }
    </style>
    
     <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

5. 使用before和after双伪元素清除浮动

<style>
        .father {
            width: 400px;
            border: 1px solid deeppink;
        }

        .big {
            width: 200px;
            height: 200px;
            background: darkorange;
            float: left;
        }

        .small {
            width: 120px;
            height: 120px;
            background: darkmagenta;
            float: left;
        }

        .footer {
            width: 900px;
            height: 100px;
            background: darkslateblue;
        }

        /* 伪元素是行内元素 正常浏览器清除浮动的方法 */
        .clearfix::after,
        .clearfix::before {
            content: '';
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }

        /* IE6清除浮动的方式  *号只有IE6-IE7执行，其他浏览器不执行 */
        .clearfix {
            *zoom: 1;
        }
    </style>
    
    <div class="father clearfix">
        <div class="big">big</div>
        <div class="small">small</div>
    </div>
    <div class="footer"></div>

记录记录！