清除浮动影响的方法

高度塌陷问题：
当子元素设置浮动后，子元素脱离文档流，不占据原来的位置，原位置不保存，因此父元素的高度塌陷，后面在文档流中的元素会往上走，此为高度塌陷问题。
解决办法：
- 浮动元素的父元素加高（高度已知）
- 浮动元素的父元素加overflow:hidden|auto
自动找回高度，当子元素溢出时，他会被隐藏
- 浮动元素的父元素加浮动，开启BFC
- 受影响的元素加clear:both
- 空div法
创建一个div，给其设置属性为clear:both
- 伪对象法

<div class="container clearfix">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
</div>
<div class="clear"></div>
<div class="inner"></div>

 <style>
        .container{
            border: 10px solid #ccc;
            /*overflow: auto;*/
            /*float: left;*/
        }
        .container>div{
            width: 25%;
            height: 100px;
            background-color: #bfa;
            text-align: center;
            line-height: 100px;
            font-size: 3em;
            float: left;
        }
        .container>div:nth-child(2n){
            background-color: yellow;
        }
        .inner{
            width: 200px;
            height: 200px;
            background-color: deepskyblue;
            /*clear: both;*/
        }
        .clear{
            clear: both;
        }
        .clearfix::before,.clearfix::after{
            content:"";
            display:table;
            clear:both;
        }
    </style>