float 本质是图文环绕而非布局工具，其导致父容器高度塌陷是规范行为而非 bug；现代推荐用 display: flow-root 创建 BFC 清除浮动，兼容性好且无副作用；clear: both 仅对前一个浮动兄弟生效，失效常因元素自身浮动或不在同一 BFC。
因为不理解浮动，就无法真正看懂老项目、调试 IE 兼容逻辑、排查 margin 塌陷，更没法准确判断什么时候该换 Flex/Grid、什么时候必须硬着头皮修 float 布局。
float 导致父容器高度塌陷，不是 bug，是渲染规则
浮动元素脱离标准文档流，父容器计算高度时直接忽略它们——所以 .container 的 height 变成 0，background-color 和 border 看起来“消失”，后续元素（比如 .footer）直接上浮覆盖。这不是样式写错了，是浏览器按规范执行的结果。
- 常见于图文混排、老式导航栏、CMS 主题模板等场景
-
overflow: hidden能“骗”出高度，但会意外裁剪position: absolute下拉菜单、box-shadow或transform位移后的内容 -
height: auto不起作用，它真不会自动撑开
display: flow-root 是现代清除浮动最简方案
一行代码创建 BFC（块级格式化上下文），让父容器重新包含浮动子元素，且不隐藏溢出、不污染 DOM、不干扰内外布局流。
- 兼容性足够好：
Chrome 64+、Firefox 59+、Safari 10.1+都支持 - 比伪元素
.clearfix::after更干净：不用写content: ""、不用设display: block、没有额外 DOM 节点 - IE 全系不支持，但如果你还在支持 IE，那清除浮动只是你该解决的最小问题
clear: both 不是“清空所有浮动”，只对前一个浮动兄弟生效
写了 clear: both 却没效果？大概率是因为：
- 该元素本身也设置了
float，它自己已脱离文档流，clear失去作用对象 - 它和浮动元素不在同一个 BFC 内（比如父容器用了
display: flex） - 它被
display: none或visibility: hidden隐藏了，但样式仍存在 - 它写在浮动元素之前，而
clear只能影响“紧邻的前一个”浮动兄弟
调试时临时加 background: red 和 border: 1px solid 到待清除元素，确认它是否真实渲染、是否被其他样式压制。
float 没死，但它早就不该负责布局了
浮动的本质是图文环绕，不是布局工具。今天用 display: flex 写个左右分栏，比用 float: left + clear: both 少踩 80% 的坑——宽度计算不会错、换行不会莫名其妙、响应式断点下不会突然堆叠。
真正需要手写清除逻辑的场景，往往集中在三类地方：金融/政务类老系统维护、需兼容 IE11 的内网应用、某些 CMS 主题二次开发。这些地方的“复杂点”不在技术本身，而在没人敢动、没人敢删、没人敢重构的隐性依赖链里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
