BFC笔记?

什么是BFC

BFC(Block Formatting Context,块格式化上下文)指的是CSS布局的一块独立渲染区域。这块区域内只有Block-level box参与布局，因此会表现出一些特性。

触发BFC的常见条件

满足以下条件之一即可触发：

• HTML元素
• 浮动元素 float != none
• 溢出内容不可见的元素 overflow != visible
• 行内块元素 display = inline-block
• 绝对定位元素 position = absolute或fixed
• 弹性元素（flex）、网格元素（grid）的直接子元素
• 多列容器 column-count != auto
• display = flow-root 该属性使用flow layout布局内容，也就会创建bfc
• contain =layout、content或 strict contain用于性能优化，layout声明外部元素与内部元素互不影响，content在layout的基础上声明子元素也不会在content-box外（padding，border，margin）显示，并且counter等具有影响其他元素能力的属性也会被隔离，strict在layout的基础上必须声明宽高，因为在此模式下子元素不能撑开父元素
• 与表格有关的一些属性

BFC布局特性

浮动定位与清除浮动都只会影响同一个BFC内的元素。

独立的BFC区域不会被浮动元素覆盖，但可以包含。

外边距折叠（Margin collapsing）只发生在同一BFC中的块级元素间。见https://cloud.tencent.com/developer/article/1425053

​