如何理解 BFC ​

概念 ​

块级格式化上下文 Block Formatting Context，简称 BFC。

它是一块独立的渲染区域，它规定了在该区域中，常规流块盒的布局。

• 常规流块盒在水平方向上，必须撑满包含块

• 常规流块盒在包含块的垂直方向上依次摆放

• 常规流块盒若外边距无缝相邻，则进行外边距合并

• 常规流块盒的自动高度和摆放位置，无视浮动元素

例子 1：高度坍塌问题

不同的 BFC 区域，它们进行渲染时互不干扰。

• BFC 元素内部的渲染不会影响到外部

• 创建 BFC 的元素，它的高度需要计算浮动元素

• 创建 BFC 的元素，它的边框盒不会和浮动元素重叠

• 创建 BFC 的元素，不会和它的子元素进行外边距合并（同一个 BFC 的元素才能合并）

例子 2：外边距合并问题

以下元素会在内部创建 BFC 区域：

• 根元素

• 浮动和绝对定位元素

• overflow 不等于 visible 的块盒

• display 属性为 table 或 inline-block 的元素

成本最小的方式：overflow: hidden