从例子来看BFC

Posted 2020-12-07 homehtml

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的高度浮动元素也会参与计算

本文转载于:猿2048从例子来看BFC