什么是块级格式化上下文(BFC),如何工作
1.规范解释
块格式化上下文(Block Formatting Context,BFC)是Web页面的可视化CSS渲染的一部分,是布局过程中生成
块级盒子的区域,也是浮动元素与其他元素的交互限定区域。
2.通俗解释:
BFC 是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其它环境
中的物品。
如果一个元素符合触发BFC的条件,则该元素中的布局不受外部影响。
浮动元素会创建BFC,所以浮动元素内部子元素主要受浮动元素影响,两个浮动元素之间是互不影响的。
3.创建方式:
根元素或包含根元素的元素
浮动元素 float = left | right 或 inherit(≠ none)
绝对定位元素 position = absolute 或 fixed
display = inline-block | flex | inline-flex | table-cell 或 table-caption
overflow = hidden | auto 或 scroll (≠ visible)