从例子来看BFC

BFC

首先BFC的英文全称Block Format Context，也就是块级格式化上下文。

BFC特性

首先，咱们你们都知道的BFC特性：

1. 内部的元素会在垂直方向，从顶部一个接一个的放置
2. Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。
3. 每一个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此；
4. BFC的区域不会与float box重叠。
5. BFC就是页面一个独立的容器，容器里面的元素不会影响到外面的元素，反之亦然。
6. 计算BFC的高度时，浮动元素也会参与计算

建立BFC方法

下面也是你们都熟悉的建立BFC的方法

1. 根元素
2. float不为none
3. overflow不为visible
4. display为table-cell,table-caption,inline-block,flex,inline-flex,flow-root其中最后一个为专门建立BFC的属性
5. position为absolute,fixed

实例

实例1

从实例1能够看到特性1，内部元素会从顶部一个接一个的放置，而且属于同一个BFC的两个相邻的margin会发生重叠。如何解决边距重叠的问题呢？此时咱们须要给元素套上一个父元素，将父元素变成BFC。

实例

这样即可以解决边距重叠问题。

实例2

从实例2上能够看到，元素的外边距会触碰到包含块容器的外边框，也就是元素左边与容器左边相接触，与浮动元素发生了重叠。

当右面元素触发BFC的时候，不会与左面元素发生重叠，见实例

实例3

当两个子元素都进行浮动时，此时父元素的高度会消失，第六个特性，计算BFC的高度时，浮动元素也会参与计算，此时咱们触发父元素的BFC。实例

此时发现高度会从新被撑开，因此计算BFC的高度浮动元素也会参与计算