float导致父容器高度塌陷，因其脱离标准文档流，父容器计算高度时无法包含浮动元素；需通过触发bfc（如overflow:hidden）或伪元素清除浮动（::after{content:"";display:table;clear:both}）修复。
float 为什么会让父容器高度塌陷
因为 float 元素会脱离标准文档流，父容器在计算高度时“看不见”它。这不是 bug，是 CSS2.1 明确定义的行为：浮动元素不参与块级格式化上下文（BFC）的常规高度计算。
常见错误现象：div 包着几个 float: left 的子元素，父 div 在浏览器里高度为 0，背景色或边框消失。
- 临时修复用
overflow: hidden或overflow: auto触发父容器生成 BFC —— 简单但有副作用（比如裁剪position: absolute子元素或隐藏滚动） - 更干净的做法是用伪元素清除浮动：
::after { content: ""; display: table; clear: both; } - 注意
clear: both必须作用在浮动元素之后的块级元素上，否则无效
float 和 inline-block 在多列布局中的实际差异
两者都能实现横向排列，但行为根源完全不同：float 脱离文档流，display: inline-block 仍在文档流中，只是以行内方式参与排版。
使用场景：做响应式侧栏+主内容时，float 曾是唯一选择；现在 inline-block 更适合固定宽度工具栏、图标组等轻量横向结构。
立即学习“前端免费学习笔记（深入）”；
-
inline-block会受 HTML 空格/换行影响，产生约4px间隙 —— 解决办法要么删空格，要么设父容器font-size: 0再重置子元素字体 -
float不吃空格，但必须处理清除，且无法用vertical-align对齐（它只对 inline-level 元素有效） - IE6/7 对
inline-block支持差，需用*display: inline; *zoom: 1hack，而float兼容性反而更好
从 float 到 flex 的迁移中，哪些习惯要立刻改掉
很多老项目重构时直接把 float: left 换成 display: flex，结果发现布局错乱 —— 根本原因在于二者控制维度不同：float 是单向脱离流，flex 是整套新渲染模型。
典型错误现象：原本靠 float 实现的左中右三栏，改成 flex 后中间栏没自适应，或者 margin 行为异常。
- 别再依赖
clear—— flex 容器内部不存在“浮动清除”概念，clear属性完全无效 -
float下的width是硬约束，flex 里优先用flex: 1或flex-grow让子项弹性伸缩 -
margin: auto在 flex 里能居中，但在 float 布局中只对块级元素水平居中有效，垂直无效 - 旧代码里常见的
float: left; width: 33.333%应替换为flex: 0 0 33.333%，避免 flex-grow 干扰
为什么现代项目里还可能遇到 float
不是所有场景都被 flex/grid 完全覆盖。真实线上环境里，float 仍有不可替代的角落。
使用场景：图文混排（文字环绕图片）、部分 CMS 生成的旧模板、需要兼容 IE8–9 的政企后台、极简脚本生成的动态卡片列表。
- CSS Shapes（如
shape-outside: circle()）必须基于浮动元素才能生效，这是目前唯一能实现非矩形文本环绕的方案 - 某些 UI 库（如 Bootstrap 3）的栅格系统底层仍用
float，升级到 v4+ 才切到 flex —— 查看源码时看到.col-md-6 { float: left; }不用惊讶 - 性能上，
float渲染开销比 flex 小，但在现代浏览器里这点差异几乎感知不到；真正影响性能的是滥用float+ 大量clear导致的重排链
文档流的理解不能只停留在“浮动=向左向右”，关键在于它如何改变元素在盒模型、定位、层叠上下文中的角色。一旦开始混合使用 float / position / flex，最容易出问题的永远是那个被忽略的“父容器是否建立了 BFC”。
