float 会让父容器高度塌陷，因为浮动元素脱离文档流，父容器无法感知其高度；这是 css2.1 规定行为，非 bug，需通过创建 bfc（如 overflow: hidden、display: flow-root 或伪元素 clear）来修复。
float 为什么会让父容器高度塌陷
因为 float 元素会脱离普通文档流，父容器在计算高度时直接“看不见”它。这不是 bug，是 CSS2.1 规定的行为——浮动元素不参与块级格式化上下文（BFC）的自动高度计算。
常见错误现象：div 包着几个 float: left 的子项，但父 div 在浏览器里高度为 0，背景色/边框都看不到。
- 只用
float布局，却不触发父容器 BFC，就一定会塌陷 -
clear: both放在子项末尾只能撑开自身，不能让父容器“感知”到浮动区域 - 用
overflow: hidden强制创建 BFC 是有效手段，但可能意外裁剪溢出内容（比如下拉菜单、阴影）
display: inline-block 无法替代 float 做多列布局
display: inline-block 确实能避免塌陷，但它和 float 解决的是不同层面的问题：前者是显示类型，后者是定位行为。强行混用反而引入新麻烦。
使用场景差异明显：需要文字环绕图片？float 是唯一原生支持；要做等高栅格？display: inline-block 高度由内容决定，列之间难对齐。
-
inline-block元素间有默认空白符（空格/换行），导致宽度计算不准，常需写font-size: 0或注释删空格 - IE8 及以下不支持
inline-block对非替换元素生效（button、input可以，div不行） - 它不会触发 BFC，父容器仍可能因内部其他浮动而塌陷——清除浮动这一步没少做
现代清除浮动的三种可靠写法（别再用空标签了）
清除浮动本质是让后续元素避开浮动区域，同时让父容器重新包含浮动子项。关键不在“清”，而在“建立新的块级上下文”或“强制参与流式计算”。
- 伪元素法（推荐）：
::after { content: ""; display: table; clear: both; }—— 兼容 IE8+，不影响语义，无额外 DOM -
display: flow-root（最干净）：给父容器设display: flow-root，直接创建无副作用的 BFC，Chrome 64+/Firefox 59+/Safari 15.4+ 支持 - 避免用
overflow: auto：虽然能触发 BFC，但滚动条可能意外出现（尤其内容刚好超出时），且 Safari 对overflow: hidden的渲染有细微偏差
float 还值得学吗？什么时候必须用它
纯 CSS 布局中，float 已被 flex 和 grid 大幅取代，但它在两个真实场景里仍是不可替代的：
- 文本环绕图像：
img { float: left; margin-right: 1em; }是目前唯一无需 JS、不破坏语义、兼容所有浏览器的方案 - 旧系统维护：大量遗留 CMS 模板（如 WordPress 主题）、邮件 HTML（Outlook 渲染引擎仅支持 float + table）仍在依赖它
- 注意：
float和display: flex同时设置时，float会被忽略——不是叠加生效，而是被覆盖
真正容易被忽略的是：清除浮动不是目的，让布局可预测才是。很多问题表面是“没清浮”，实际是父容器没形成 BFC，或子项尺寸计算逻辑混乱。盯住渲染树，比背清除技巧管用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
