这是一个非常简单的问题，什么是bfc规范 首先我们得了解一点

高度塌陷问题

在浮动布局中，父元素默认是被子元素撑开的 如下

我们给子元素添加浮动后其他代码不变，脱离标准流

浮动后，将无法撑起父元素高度布局切下面的元素将往上移布局将会变得很混乱/

此时我们发现 父元素的高度塌陷了，切box和inner两个合并了，也就是说父元素高度塌陷后，其下的元素（兄弟元素）会自动上移，此时布局已经很乱了。 那么怎么解决呢 BFC (Boloc Formatiting contenx) 块级格式化环境 bfc是css隐含的一个属性 可以为一个元素开启bfc 该元素变成一个独立的布局区域（其实html也开启了bfc）

bfc特点：

1.开启BFC不会被浮动元素所盖 2.开启子元素和父元素的外边距不会重叠 默认情况下子元素添加外边距也就是margin：20,父元素也会跟着移动 也就是外边距重叠了 3.开启bfc元素可以包含浮动的子元素（也就是不会出现塌陷问题）

如何开启bfc

        开启BFC的方法
        一、开启父元素的同方向浮动；那么父元素和子元素一起脱离了文档流，
        父元素下面的同级元素依旧会上移，但是父元素也算是有了高度！这个高度和子集元素高度一致！
        float: left;

        二、设置父级元素为绝对定位或者固定定位，和设置浮动的效果一样。
        position:absolute;

        三、设置父级元素的display为incline-block，也就是将父级元素变成了行内块级元素？
        父元素下面的同级元素会在原本文档流中的位置下些许下移，考虑是由于变成了块级元素导致两个块级元素导致？？？
        父级元素的高度被子级元素撑开了！
        设置成：display:block;就不行！
        
        display:inline-block;

        四、设置父级元素的overflow非默认属性：
       父级元素会被子元素撑开,高度就是子元素的高度;
       父元素下面的同级元素不会上移。
        overflow:hidden;



    5、给塌陷的父级元素的最后添加一个元素，使该元素清除浮动，呈现块级样式。也可解决高度塌陷问题！*
    .box1:after{
        content: '';
        display: table;
        clear: both;*/
    /*} 
    推荐使用第四个方法