请解释什么是 BFC，并说明可以通过哪些方式创建 BFC？
考察说明
考查对 CSS 格式化上下文概念的理解及创建方法的掌握程度。
回答思路
- 【回答框架 1】BFC（块级格式化上下文）是页面 CSS 渲染时的一块独立区域，它内部的布局不会影响外部元素，反之亦然。可以将其理解为隔离的渲染上下文，常用于解决外边距折叠、浮动元素覆盖等问题。
- 【回答框架 2】创建 BFC 的常见方式包括：根元素或包含根的元素；浮动（float 值不为 none）；绝对定位（position 为 absolute 或 fixed）；行内块元素（display 为 inline-block）；表格单元格或表格标题（display 为 table-cell、table-caption）；overflow 值不为 visible 的块级元素；弹性或网格容器（display 为 flex 或 grid）等。
- 【回答框架 3】BFC 的核心特性包括：内部的块级盒在垂直方向一个接一个排列；盒之间的垂直外边距会发生折叠（同属于一个 BFC 的相邻兄弟）；BFC 不会与浮动元素重叠；计算 BFC 高度时包含浮动子元素；BFC 是独立的布局上下文，内部元素不会影响外部。
- 【回答框架 4】在实践中最常用于清除浮动和防止外边距折叠，例如给容器设置 overflow: hidden 使其形成 BFC，从而包含内部的浮动子元素。
- 【回答框架 5】选择创建方式时需结合布局需求：若需兼容旧浏览器，可采用 overflow 方法；若需实际定位或布局语义，可选用 flex 或 grid 等现代方法。
- 【关键点 1】BFC 是独立的渲染区域，隔离内部与外部布局影响。
- 【关键点 2】创建方式包括根元素、浮动、绝对定位、inline-block、overflow 非 visible、flex/grid 等。
- 【关键点 3】BFC 不重叠浮动元素，可包含浮动子元素以清除浮动。
- 【关键点 4】同一 BFC 内相邻块级盒的垂直外边距会合并。
- 【关键点 5】选择创建方式需考虑兼容性和布局语义。
- 【易错点 1】将 BFC 理解为 CSS 属性，实际它是格式化上下文概念。
- 【易错点 2】认为所有元素都能创建 BFC，需特定属性组合触发。
- 【易错点 3】忽略 BFC 内外边距折叠仍会发生，仅隔离外部影响。