块格式化上下文(Block Formatting Context,BFC) 是Web页面的可视化CSS渲染的一部分,是块盒子的布局过程发生的区域,也是浮动元素与其他元素交互的区域。
主要触发方式:
-
浮动元素(元素的 float 不是 none)
-
绝对定位元素(元素的 position 为 absolute 或 fixed)
-
行内块元素(元素的 display 为 inline-block)
-
overflow 值不为 visible 的块元素
-
弹性元素(display为 flex 或 inline-flex元素的直接子元素)
-
网格元素(display为 grid 或 inline-grid 元素的直接子元素)
-
display 值为 flow-root 的元素
BFC干嘛用的呢?
最常用于:解决高度坍塌