浮动是历史遗留门槛，需快速识别修复而非从零学习；float:left致父容器高度塌陷表现为背景/边框消失、后续内容重叠；clearfix推荐display:table因其中性盒特性更稳妥；overflow:hidden仅触发bfc“看似”清除但会裁剪溢出；新项目应优先用flex/grid替代浮动。
浮动不是“必修课”，而是历史遗留的实操门槛——它不值得从零学起，但必须能快速识别、定位、修复。
float:left 导致父容器高度塌陷，怎么一眼看出问题？
现象很典型：父容器背景色/边框突然“消失”或高度只剩几像素，后续内容直接叠在浮动元素下方。这不是代码写错了，是浏览器按规范执行的结果——浮动元素脱离文档流，父容器计算高度时“看不见”它们。
快速判断三步：
- 检查父容器内是否所有子元素都设置了
float: left或float: right - 看父容器有没有设置
height、min-height等固定高度（有则可能掩盖塌陷） - 用浏览器开发者工具选中父容器，看 computed height 是否远小于子元素实际占位
.clearfix::after 为什么推荐 display: table 而不是 display: block？
因为 display: block 在某些 IE 版本下会继承父容器的 line-height 或字体设置，导致伪元素意外撑高；而 display: table 生成的是一个中性块级盒，不参与行内格式化上下文，副作用更小。
关键细节不能漏：
-
content必须存在，哪怕只是空格：content: ""（IE8 要求非空字符串） - 不要加
height: 0或font-size: 0——这些是过时的 hack，现代浏览器不需要 - 如果父容器本身是
display: inline-block，用block可能引发基线对齐错位，table更稳妥
overflow: hidden 真的能“清除浮动”吗？
不能。它只是触发了 BFC（块级格式化上下文），让父容器重新包含浮动子元素，从而“看起来”高度正常了。但这不是清除，是绕过。
副作用很实在：
- 内容溢出会被裁剪（比如下拉菜单、tooltip、动画移出区域的部分）
- 配合
transform或position: fixed元素时，可能产生渲染异常 - 在 flex/grid 容器里设
overflow: hidden，会干扰主轴对齐行为
所以它适合快速验证是否是浮动塌陷，不适合上线使用。
现在还该手动加 clearfix 类吗？
绝大多数情况不该。如果你正在写新项目，且布局目标是并排卡片、导航栏、响应式栅格，直接用 display: flex 或 display: grid。它们天然不脱离文档流，没有塌陷问题，也不需要任何清除逻辑。
真正需要 clearfix 的场景其实很窄：
- 维护 2015 年前的老系统，HTML 结构不可改
- CMS 输出的富文本内容（如 WordPress 小工具）里混入了
float图片 - 第三方组件库强制使用浮动，你又无法替换其样式
最容易被忽略的一点：清除浮动不是目的，让布局可预测才是。一旦你开始为每个浮动容器加类、查漏补缺、反复调试，就该停下来问一句——这真的是当前问题最轻量的解法吗？
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
