BFC原理

BFC是什么？

了解BFC之前，先了解Box，Formatting Content的概念

Box：CSS布局的基本单位
Box是CSS布局的对象和基本单位，可以理解为一个页面就是有很多个Box组成的。元素的类型和display属性决定了Box的类型；一个不同类型的Box，会参与不同Formatting Content（一个决定如何渲染文档的容器），因此Box内的元素会以不同方式进行渲染，主要的Box有以下几种：

Block-level box：display属性为block、list-item、table的元素，会生成Block-level box。并且参与Block Formatting Content
Inline-level box：display属性为inline、inline-block、inline-table的元素，会生成Inline-level box。并且会参数Inline Formatting Content
Run-in box：css3才有

Formatting Content
是CSS2.1里面的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，决定了其子元素如何定位以及与周围元素之间的相互作用。
常见的Formatting Content有Block Formatting Content（BFC）和Inline Formatting Content（IFC）
注意：CSS2.1中只有BFC和IFC，CSS3中增加了GFC和FFC.
BFC定义
BFC直译为块级格式化上下文，它是一个独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与外部毫不相干。
注意：可以把BFC理解为一个大的盒子，其内部是由Block-level box组成的
BFC的规则

BFC内部的Box会在垂直方向，一个接一个的设置；
Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻box的margin会发生重叠
每个元素的margin box的左边会与包含块border box的左边相接触（对于从左到右的格式化，否则相反），即使存在浮动也会如此。
BFC的区域不会与float box的重叠
BFC就是页面上的一个独立容器，容器里面的元素不会影响到外面的元素，反之亦然。（这一点很重要，要牢牢记住）
计算BFC的高度时，浮动元素也参与计算。

BFC由什么条件创立?

根元素或其它包含它的元素
float属性不为none
position属性为absolute或fixed
display属性为inline-block、table-cell、table-caption、flex、inline-flex
overflow属性不为visible

BFC的用途

自适应两栏布局

<style >
body{
  position: relative;
  height: 400px;
}
.aside{
  height: 200px;
  width: 200px;
  background-color: pink;
  float: left;
}
.main{
  background-color: grey;
  height: 300px;
}
</style>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

效果：

Paste_Image.png

根据BFC布局规则的第三条：

每个元素的margin box的左边，与包含块border box的左边相接触（对于从左到右的格式化，否则相反）。即使存在浮动也是如此

因此，即使存在浮动的aside，但是main还是与包含块的左边相接触；
按照BFC布局的第四条规则：

BFC的区域不会与float box重叠

因此，可以通过使main触发BFC，来实现自适应两列布局

.main{
  overflow: hidden;
}

当main触发BFC后，其不会与浮动的aside重叠。因此会根据包含块的宽度和aside的宽度，自动变窄，效果如下：

Paste_Image.png

清除内部浮动
当子元素均浮动时，其无法撑开父元素，这是可以让父元素生成BFC，如下：

<style>
    .par {
        border: 5px solid #fcc;
        width: 300px;
    }
 
    .child {
        border: 5px solid #f66;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

显示：

Paste_Image.png

根据BFC布局规则的第六条：

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

因此为了达到清除内部浮动，可以让.par触发BFC，那么计算par的高度时，浮动元素也参与计算，par就被撑开了；
代码：

.par{
    overflow: hidden;
}

显示：

Paste_Image.png

防止marin重叠
代码：

<style>
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <p>Hehe</p>
</body>

页面：

Paste_Image.png

可以发现，两个p元素之间的垂直margin出现了重叠；
根据BFC的第二条规则：

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

因此，可以在其中一个p上包裹容器，然后触发其BFC，这样两个p就不在同一个BFC，因此就不会发生重叠

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>Haha</p>
    <div class="wrap">
        <p>Hehe</p>
    </div>
</body>

效果如下：

Paste_Image.png

总结

以上几个例子都体现了BFC的第五条规则：

BFC就是页面上一个隔离的独立容器，容器内的子元素不会影响外部的元素，反之亦然。

因为BFC内部的元素不会影响外部的元素，因此当BFC外部有浮动元素时，BFC为了不影响内部Box的布局，BFC会通过变窄，避免与浮动元素重叠；同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动元素的高度。避免margin重叠也是如此

转自：前端精选文摘：BFC 神奇背后的原理

BFC原理

BFC是什么？

BFC由什么条件创立?

BFC的用途

总结

推荐阅读更多精彩内容