BFC详解

BFC（Block Formatting Context）是一个独立的块级格式化上下文，它定义了元素如何在文档中布局，并且与其他元素之间的相互作用。BFC中的元素在布局上是相互隔离的是一个独立的布局环境，BFC内部的元素布局不会受到外部元素的影响。

如何触发BFC，BFC的形成规则

1. 根元素

2. float：left或right

3. position：absolute或fixed

4. display：inline-block、flex、inline-flex、flow-root、table-caption、table-cell

5. overflow：hidden、scroll、auto

BFC布局规则

1. 内部的盒子会在垂直方向一个接着一个地放置。

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

3. 每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。

4. BFC的区域不会与float重叠。

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

6. 计算BFC的高度时，浮动子元素也参与计算。浮动元素会撑起父元素高度。

布局样例

第一条，垂直方向一个接着一个放置

第二条，margin会发生重叠

第三条，紧挨着左边框

第四条，BFC区域不会与float重叠。在第三条代码的基础上，我们将box2，设置成overflow:hidden，使他形成一个新的BFC。

第五条，BFC与外部互不影响。这里参考第四条代码，box1只是在自己的BFC内浮动，box2形成了另一个BFC，他们两个是没有重叠的，互不影响。在第三条代码里，box1和box2处于同一个BFC，所以第三条时它们两个是互相影响的。

第六条，浮动元素会撑起父元素高度。将box1-container设置为BDC，此时box1-container是有高度的，高度和box1相同。而box2-container的高度为0。