BFC布局

一、触发该模式：

1、根元素

2、float属性不为none

3、position为absolute或fixed

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

5、overflow不为visible

二、规则

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

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

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

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

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

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

扫描二维码关注公众号，回复： 1231467 查看本文章

应用的场景

**上下边距合并： ** 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;
        }

结果：