Block Formatting Context
css规范对它的定义
- 浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文
- 在一个块格式化上下文中，盒在竖直方向一个接一个地放置，从包含块的顶部开始。两个兄弟盒之间的竖直距离由'margin'属性决定。同一个块格式化上下文中的相邻块级盒之间的竖直margin会合并
MDN对BFC的的描述
一个块格式化上下文（block formatting context） 是Web页面的可视化CSS渲染出的一部分。它是块级盒布局出现的区域，也是浮动层元素进行交互的区域。一个块格式化上下文由以下之一创建：
- 根元素或其它包含它的元素
- 浮动元素 (元素的 float 不是 none)
- 绝对定位元素 (元素具有 position 为 absolute 或 fixed)
- 内联块 (元素具有 display: inline-block)
- 表格单元格 (元素具有 display: table-cell，HTML表格单元格默认属性)
- 表格标题 (元素具有 display: table-caption, HTML表格标题默认属性)
- 具有overflow 且值不是 visible 的块元素，
- display: flow-root
- column-span: all 应当总是会创建一个新的格式化上下文，即便具有 -
- column-span: all 的元素并不被包裹在一个多列容器中。
知道上面这些好像并没有什么用处,我们还是不理解
BFC是什么呢? BFC 是这样的东西（堆叠上下文也是）
- 它没有定义
- 它只有特性/功能
功能一: 用 BFC 包住浮动元素
其实我也不知道什么意思,不如看几个例子吧
给父元素float
给父元素绝对定位
display:inline-block
overflow不为visible
display:table-cell
display: flow-root
重点: display: flow-root(触发BFC,无副作用)
看了上面几个例子,父元素触发BFC包住儿子,再看一下定义:
- 浮动，绝对定位元素，非块盒的块容器（例如，inline-blocks，table-cells和table-captions）和'overflow'不为'visible'的块盒会为它们的内容建立一个新的块格式化上下文
意思是不是很明白了,只要给父元素一些上面规定的属性,就会有BFC,可以包住子元素
margin 合并
image.png
一个块格式化上下文包括创建它的元素内部所有内容，除了被包含于创建新的块级格式化上下文的后代元素内的元素. 因为 child为浮动元素创建了自己的BFC,所以sunzi不归parent管了
功能二: 相邻BFC划清界限
image.png
两个相邻元素,哥哥和弟弟,哥哥左浮动,就会叠在一起,给弟弟一些属性,创建BFC,就会和哥哥分开,所以BFC的一个作用是相邻的划清界限
不明白BFC的概念,但是我们应该看到之后,就知道这是BFC
网友评论