float是为图文环绕设计的半脱离文档流机制，文字会绕排而块级元素会上浮遮盖；清除浮动本质是主动闭合布局，clearfix伪元素法（display:table+clear:both）最兼容稳定。
因为不理解浮动，就看不懂大量线上老项目、无法修复图文环绕类 Bug、更会在清除浮动时反复踩坑——它不是“过时知识”，而是 CSS 布局演进的底层参照系。
float:left 和 float:right 在真实页面中仍在高频出现
虽然新项目基本不用 float 做整体布局，但以下场景每天都在发生：
- 新闻站正文里
<img>标签仍普遍带float: left实现图左文右，且没加clear或 BFC 触发，导致后续<p>段落背景被遮盖 - 电商商品卡片列表用
float: left排列，响应式断点切换后未重置浮动，造成最后一行错位或换行异常 - 旧 CMS 后台编辑器输出的 HTML 自动包裹
<div class="alignleft">，CSS 里对应.alignleft { float: left; }，前端不敢删怕崩版面
父容器高度塌陷是排查布局错乱的第一怀疑对象
当你看到以下现象，80% 是浮动没清干净：
- 给
.wrapper加了background-color却看不到颜色，height在开发者工具里显示为0px - 浮动子元素下方的
<footer>突然“上浮”到内容区中间，而不是紧贴内容底部 - 用
overflow: hidden临时修复后，内部position: absolute元素被意外裁剪
根本原因：浮动元素脱离文档流，父容器计算高度时“看不见”它们。这不是 bug，是 float 的设计契约——你得主动告诉浏览器“这里该闭合了”。
立即学习“前端免费学习笔记（深入）”；
clearfix 伪元素法仍是兼容性最稳的清除方案
别迷信 overflow: hidden 或 display: flow-root，尤其在要支持 IE11 或低版本安卓 WebView 的项目里：
-
overflow: hidden会截断box-shadow、transform动画溢出部分，且无法与position: absolute子元素共存 -
display: flow-root在 Safari 10.1–12.1 中有渲染抖动问题，iOS 12.2+ 才稳定 - 真正跨浏览器无副作用的是 clearfix：
::after { content: ""; display: table; clear: both; }，它不干扰定位、不裁剪、不触发重绘陷阱
float 对行内内容和块级内容的影响完全不同
这是最容易混淆、也最影响排版判断的一点：
- 文字（行内内容）会主动绕开浮动元素，行框自动缩短，视觉上“环绕”——这是 float 的初衷
- 块级元素（如
<div>、<p>）不会绕，而是“顶上去”，其background和border会被浮动元素覆盖，形成“钻底”效果 - 所以
float+<p>能正常图文混排，但float+<div>就必须清浮动，否则布局逻辑全乱
这种双重行为不是缺陷，而是 float 作为“半脱离文档流”机制的本质体现——它既不是完全脱标（像 position: absolute），也不是完全在流内（像标准流块级元素）。理解这点，才能一眼看出为什么同一段 CSS 在不同 HTML 结构下表现迥异。
