BFC布局

1、触发该模式：

一、根元素

二、float属性不为none

三、position为absolute或fixed

四、display为inline-block, table-cell, table-caption, flex, inline-flex

五、overflow不为visible

2、规则

一、内部的Box会在垂直方向，一个接一个地放置。

二、Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

三、BFC的区域不会与float box重叠。毗邻块盒子的垂直外边距折叠只有他们是在同一BFC时才会发生

四、BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

五、计算BFC的高度时，浮动元素也参与计算

六、在BFC中，每一个盒子的左外边框紧挨着左边框的包含块（从右到左的格式化时，则为右边框紧挨）。即便在浮动里也是这样的（尽管一个盒子的边框会由于浮动而萎缩），除非这个盒子的内部建立了一个新的BFC（这种状况下,因为浮动，盒子自己将会变得更窄）

应用的场景

**上下边距合并： ** html结构：

<div class="con">
    <p>num1</p>
    <p>num2</p>
      <p >num3</p>
</div>

css：

.con{
            width: 500px;
            background: sandybrown;
            overflow: hidden;
        }
        p{
            width: 200px;
            height:100px;
            margin: 10px;
            background: greenyellow;
        }
        .bfc{
            overflow: hidden;
        }

结果：上下边距合并了

解决办法：

将其中一个p元素加入到一个新的BFC块中；

html结构改成：

<div class="con">
    <p>num1</p>
    <p>num2</p>
    <div class="bfc">
        <p >num3</p>
    </div>
</div>

结果以下:

清除浮动撑起塌陷的父元素：

css：

.parent{
           width: 400px;
           border: 1px solid red;
       }
        .children{
            width: 100px;
            height: 200px;
            float: left;
            background: aqua;
            margin-left: 10px;
        }

html结构：

<div class="parent">
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
</div>

结果：

若是将parent变成BFC，加上overflow：hidden建立一个新的BFC，在新的BFC中这些元素又回归到正常的文档流

结果以下：

文字环绕：

css：

*{margin: 0;
        padding: 0}
        .parent{
            width: 250px;
            height: 200px;
            border: 1px solid red;
            margin-left: 10px;
            margin-top: 10px;
        }
        .float{
            width:100px;
            height:100px;
            text-align: center;
            vertical-align: center;
            float: left;
            border: 1px solid black;
            margin-left: 10px;
            margin-top:10px;
            line-height: 100px;
        }
        p{
            background: #ffcccc;
            /*overflow: hidden;*/
        }

html结构：

<div class="parent">
    <div class="float">
        浮动啦
    </div>
    <p>
 花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q花q
    </p>
</div>

结果：

根据第六条规则，将p元素建立成一个新的BFC，就能够解决这个文字环绕问题，例如加上overflow：hidden；固然还有其余的解决办法，例如设置p的margin值、移动p、清除浮动

结果以下：

在见一个小例子：

html结构：

<div class="parent">
    <div class="children float"></div>
    <div class="children float"></div>
    <div class="children "></div>
    <div class="children float "></div>
    <div class="children float"></div>
</div>

css：

*{margin: 0;
        padding: 0}
        .parent{
            width: 500px;
            height: 420px;
            border: 1px solid red;
        }
        .float{
            float: left;
        }
    .children{
        width: 100px;
        height: 200px;
        margin-left: 15px;
        margin-top: 10px;
        background: peachpuff;
        text-align: center;
        line-height: 200px;
        border: 1px solid red;
        box-sizing: border-box;
    }
        .children:nth-child(3){
            overflow: hidden;
        }

结果：