BFC 的作用

BFC 的定义：

• 对元素设置 float, absolute, inline-block (table-cell, table-caption)
• 对块级元素设置 overflow: hidden | auto;

后，这些元素不是块级元素，但会有块级特性。即形成了BFC（块级格式上下文）。
  形成BFC后，该区域就是一个独立的空间，可以和其他容器之间作区分。
  同一个BFC中，元素布局就会像普通文档流一样，从上到下，从左到右；浮动元素的布局就按照浮动元素特性的布局。当然同一个BFC内会存在外边距合并。
  但是两个BFC内的元素不会相互影响，不会有外边距合并。
形成 BFC 主要可以解决由于浮动导致父元素高度塌陷的问题。

• 1.通过形成BFC来解决
  html代码

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

对应的CSS

    .ct{
        border: 1px solid red;
    }
    .box{
        float: left;
        width: 50px;
        height: 50px;
        background-color: green;
        margin: 20px;
    }

形成 BFC 后：

    .ct{
        border: 1px solid red;
        position: absolute;
/*或者
        float: left | right;
        display: inline-block;/*table-cell|table-caption*/
        overflow: hidden | auto;
*/
    }
    .box{
        float: left;
        width: 50px;
        height: 50px;
        background-color: green;
        margin: 20px;
    }

形成BFC可以解决浮动导致的父元素高度塌陷问题，但是父元素本身也会因为CSS设置，形成特定的特性（如浮动，绝对定位等）。

• 2.还可以通过清除浮动来解决该问题。

    .ct{
        border: 1px solid red;
    }
    .ct:after{
        content: '';
        clear: both;
        display: block;/*必须是block*/
    }