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

总结

常用的以上三种清楚浮动的办法，推荐使用第三种，兼容性比较好，并且没有添加格外的一些类，可移植性比较好