css浮動(dòng)可以實(shí)現(xiàn)很多功能，比如多欄布局，多元素的內(nèi)聯(lián)排列等等，在同時(shí)也帶來了一些問題，浮動(dòng)后就脫離了原來的文檔流，進(jìn)而就會(huì)造成父元素塌陷。

目前解決浮動(dòng)造成的這個(gè)問題主要有一下幾種方案：

1. clear:both清除浮動(dòng)

   <div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div style="clear:both"></div>
</div>

    .container {
        border: 1px solid red;
    }

    .box {
        height: 100px;
        width: 100px;
        margin: 20px;
        background: green;
        float: left;
    }

2. 塊狀格式化上下文清除浮動(dòng)

<b>什么是格式化上下文</b>
* 可以包含浮動(dòng)元素
* 不被浮動(dòng)元素覆蓋
* 阻止父子元素的margin折疊

<b>如何創(chuàng)建格式化上下文</b>
* 根元素
* 浮動(dòng)元素（float不是none）
* 絕對(duì)定位元素（position為fixed或absolute）
* display取值為inline-block,table-cell,table-caption,flex,inline-flex之一
* overflow不是visible的元

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

        .container {
            border: 1px solid red;
            /*display:table;*/
            float:left;
            /*overflow: hidden;*/
            /*position: absolute;*/
        }

        .box {
            height: 100px;
            width: 100px;
            margin: 20px;
            background: green;
            float: left;
        }

3. 偽類清楚浮動(dòng)

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

        .clearfix:before,
        .clearfix:after {
            display: table;
            content: " ";
        }

        .clearfix:after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }

總結(jié)

常用的以上三種清楚浮動(dòng)的辦法，推薦使用第三種，兼容性比較好，并且沒有添加格外的一些類，可移植性比較好