bfc能包含内部浮动元素，根本原因是其渲染机制强制计算浮动子元素的几何边界；普通容器因浮动元素脱离标准流而塌陷，bfc则将其纳入尺寸计算，确保高度撑开。
BFC 能包含内部浮动元素，根本原因在于它的渲染机制强制它“计算浮动子元素的几何边界”。这不是靠 hack 或副作用实现的，而是 W3C 规范明确要求的布局行为：一旦元素形成 BFC，浏览器就必须将其内部所有元素（包括 float 元素）纳入该上下文的尺寸计算中，不能再忽略它们的空间占用。
为什么普通容器会塌陷，而 BFC 不会？
普通块级容器在标准流中遵循“内容高度决定容器高度”的规则，但 float 元素会脱离标准流——它不参与父容器的高度计算，父容器就“看不见”它，结果就是高度塌陷为 0。
BFC 则不同：它是一个独立的格式化上下文，其内部布局规则规定：必须包含所有子元素的盒模型边界，无论是否浮动。这意味着：
-
float元素虽然脱离标准流，但仍属于该 BFC 的“内部参与者”，BFC 容器会扫描所有子元素的 margin、border、padding 和 content 区域，取最大 bottom 值作为自身高度 - 这个过程不依赖于文档流顺序，而是基于 BFC 内部的几何计算逻辑，类似一个“本地坐标系”
- 因此即使所有子元素都设置了
float: left，只要父元素触发了 BFC，它的高度就能撑开
哪些触发方式对包含浮动最可靠？
不是所有 BFC 触发方式在实际项目中表现一致。有些会附带副作用，影响布局或交互：
-
overflow: hidden最常用，但可能意外裁剪子元素的box-shadow或position: absolute溢出内容 -
display: flow-root是现代首选，专为此设计：创建 BFC 且无溢出裁剪、无滚动条、不影响定位上下文 -
float或position: absolute自身能触发 BFC，但会让父元素也脱离标准流，通常不用于解决父容器塌陷问题 -
display: inline-block可行，但会让父元素变成行内级盒子，可能引发换行或 vertical-align 问题
容易被忽略的细节：BFC 包含 ≠ 子元素重排
很多人误以为“BFC 包含浮动”意味着它会把浮动元素拉回标准流。其实不是：
- BFC 只负责“承认浮动元素的存在并据此计算自身尺寸”，并不改变浮动元素本身的脱离行为
- 浮动子元素仍会向左/右贴边，仍会挤压相邻的非浮动兄弟元素（除非它们自己也处于 BFC 中）
- 如果你希望右侧内容不绕开浮动块，需要让右侧元素也触发 BFC（比如加
overflow: hidden），而不是只靠父容器
真正关键的是理解：BFC 不是“修复浮动”，而是“重新定义容器的尺寸计算规则”。它让父容器从“视而不见”变成“看得见且算得清”。display: flow-root 是目前语义最清晰、副作用最小的选择，但老项目中仍大量依赖 overflow: hidden，这时务必检查是否有意料外的裁剪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
