css浮動可以實現很多功能，比如多欄布局，多元素的內聯排列等等，在同時也帶來了一些問題，浮動后就脫離了原來的文檔流，進而就會造成父元素塌陷。

目前解決浮動造成的這個問題主要有一下幾種方案：

1. clear:both清除浮動

   <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. 塊狀格式化上下文清除浮動

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

<b>如何創建格式化上下文</b>
* 根元素
* 浮動元素（float不是none）
* 絕對定位元素（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. 偽類清楚浮動

    <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;
        }

總結

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