父容器高度塌陷应使用伪元素清除浮动：.container::after { content: ""; display: table; clear: both; }，或设置 overflow: hidden；避免用 float 做复杂布局，优先选 flex/grid。
float 失去文档流后，父容器高度塌陷怎么办
浮动元素会脱离标准文档流，导致其父容器无法感知子元素高度，表现为“高度塌陷”——父容器 height 变为 0，背景、边框消失，后续内容上移。这不是 bug，而是 float 的设计行为。
- 最直接的修复是给父容器设置
overflow: hidden或overflow: auto（注意：后者可能意外触发滚动条） - 更语义化的方式是使用「清除浮动」：在父容器末尾添加一个空元素并设置
clear: both，或用伪元素替代（推荐）：
.container::after {
content: "";
display: table;
clear: both;
}
注意：display: table 比 block 更稳妥，能避免某些 IE 下的 margin 折叠问题；::after 必须有 content 值，否则不生效。
多列布局中 float 元素换行错位的常见原因
当多个 float: left 元素宽度之和超过父容器时，最后一项会掉到下一行——但若父容器有 padding、子元素有 margin/border，或使用了 box-sizing: content-box（默认），就容易因计算误差导致“看似没超却换行”。
- 统一使用
box-sizing: border-box，让 width 包含 padding 和 border - 确保所有浮动子项的 width + margin + padding 总和 ≤ 父容器可用宽度（注意：100% 宽度的浮动项不能加 margin，否则必换行）
- 避免对浮动元素设置
vertical-align（它对 float 无效，易造成误解）
float 布局与 flex/grid 的兼容性取舍
float 本身不是为复杂布局设计的，它本质是文字环绕工具（如图文混排）。用它做多列布局，维护成本高、响应式困难、对齐能力弱。
立即学习“前端免费学习笔记（深入）”；
- 现代项目应优先用
display: flex或display: grid实现多列；IE10+ 支持 flex，IE11+ 支持 grid（带-ms-前缀可有限支持） - 仅当需兼容 IE8–IE9 时才考虑 float 布局，且必须配合
clearfix和固定宽度/百分比宽度方案 - float 布局无法实现等高列（除非 JS 补偿），而 flex 默认主轴对齐，grid 可设
align-items: stretch
清除浮动的 clear 属性到底作用在谁身上
clear 不是作用于浮动元素自身，而是作用于“应用它的那个元素”，强制它**不在指定方向**（left/right/both）出现浮动元素。
-
clear: left表示该元素的上边界不得低于左侧任何浮动元素的下边界 - 常误写成
clear: float-left（无效）或给浮动元素自己加clear（逻辑错误） - 如果想让第 3 列不被前两列浮动影响，应把
clear: left加在第 3 列元素上，而不是父容器
真正需要小心的是嵌套浮动场景：子容器浮动后，父容器仍需独立处理塌陷，clear 对父容器无直接帮助。
