MDN BFC
BFC 也叫 块级渲染区域
单个 BFC 与 其他FC 不重叠 可嵌套
BFC是隔离的独立容器，容器内外不会相互影响。
成为一个 BFC 的方法
需要具备以下条件中的一个：
| 特征 | 写法 |
|---|---|
| 根元素 | <html> |
| 行内块 | display: inline-block; |
| 匿名表格单元格元素、表格单元格、表格标题 | display: table / table-caption / table-cell / table-row;display: table-row-group / table-header-group / table-footer-group; |
| flow-root 没有副作用的创建BFC | display: flow-root; |
弹性布局下flex 弹性元素 | display: flex / inline-flex; 的直接子元素 |
栅格布局下 grid 网格元素 | display: grid / inline-grid; 的直接子元素 |
| 多列布局容器 column-count 或 column-width 不为auto | column-count： n; 或 column-width: xxx单位; |
| 跨越元素 （素没有包裹在一个多列容器依然有效） | column-span: all; |
| float 浮动元素 float 非none | float：left / right / inline-start / inline-end; |
| position 绝对定位 | position:absolute / fixed |
| overflow 的值不是visible / clip（可能会带来滚动条的副作用） | overflow: hidden / scroll / auto; |
| contain 属性为 layout、content 或 paint | contain: layout / content / paint; |
特性
- 包含内部浮动。
计算BFC高度的时候，浮动元素也会被计算。也就解决了浮动高度坍塌的问题。 - 排除外部浮动。
不会被外部的浮动遮挡 - 阻止外边距重叠。
同一个 bfc 内 外边距会被折叠，不同bfc之间不会。
FFC/GFC 弹性/网格格式化上下文，除布局之外，与区块格式化上下文类似。弹性/网格容器中没有可用的浮动子级。
相关内容：消除浮动的方法
99
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
