overflow: hidden 能清浮动是因为它触发 BFC，使父容器包含浮动子元素高度；overflow: visible 不触发 BFC，故父容器仍高度塌陷。
为什么 overflow: hidden 能清浮动，但 overflow: visible 不行？
BFC（块级格式化上下文）不是“清浮动”的功能，而是浮动元素无法影响其外部容器布局的副作用。当一个容器触发 BFC 时，它会形成独立的渲染区域，内部浮动元素的高度会被正确包含在内——看起来就像“清了浮动”。
-
overflow: hidden、overflow: auto、overflow: scroll都会触发 BFC -
overflow: visible是默认值，不触发 BFC，所以父容器高度塌陷依旧发生 - 注意：
overflow: clip（现代支持）也触发 BFC，但兼容性差（Chrome 99+），别在生产环境单独依赖它
常见错误：给父容器加 overflow: hidden 后内容被意外裁剪——这是 BFC 触发的副作用，不是 bug，而是 overflow 属性本身的语义行为。
display: flow-root 是最干净的清浮动方式
这是专为解决“需要 BFC 又不想动 overflow”的场景设计的值，语义明确、无副作用。
- 它只创建 BFC，不影响溢出行为、不触发滚动条、不裁剪内容
- 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+；IE 完全不支持
- 如果项目需兼容 IE 或老版 Safari，不能直接用，得降级到
overflow: hidden或display: table
示例对比：
.container {
display: flow-root; /* ✅ 推荐：语义清晰，无副作用 */
}
/* vs */
.container {
overflow: hidden; /* ⚠️ 有效但可能意外裁剪内容 */
}
浮动元素本身没变，变的是父容器的渲染边界
清除浮动的本质，从来不是“让浮动元素不浮”，而是让父容器承认浮动元素的存在并撑开自身高度。
- 浮动元素仍脱离文档流，位置不变
- 父容器一旦进入 BFC，就会采用新的高度计算逻辑：包含所有子元素（含浮动）的 margin-box 高度
- 这就是为什么
float: left的子元素不会把父容器“顶高”，但父容器自己触发 BFC 后就能“感知”到它
容易踩的坑：
- 给浮动元素加
clear: both是在兄弟元素上操作，不是在父容器上“清”，对父容器高度无影响 - 用
height或min-height硬撑父容器，是掩耳盗铃——内容变多时依然会出问题 - BFC 容器内的浮动不会影响外部，但外部浮动也不会影响它——双向隔离，这点常被忽略
现代布局中，BFC 清浮动只是过渡方案
Flex 和 Grid 容器天然不参与普通文档流的浮动规则，它们的子项即使设了 float，也完全无效（规范明确要求忽略）。
- 如果你用
display: flex或display: grid布局，浮动本身就不该存在，更谈不上“清” - 目前还在用浮动做两栏/三栏布局的代码，大概率是历史包袱；新项目应直接用 Grid 的
grid-template-columns或 Flex 的justify-content+flex-wrap - BFC 方案真正适用的场景只剩：需要兼容老浏览器、或必须保留浮动语义（比如某些富文本编辑器生成的 HTML）
最后提醒一句：BFC 不是黑魔法，它只是 CSS 渲染规则里一条确定的分支路径。理解它在哪被触发、触发后容器如何重新计算尺寸，比记住“overflow 能清浮动”重要得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
