浮动元素脱离文档流，后续块级元素“看不见”它：父容器高度塌陷为0px，后续块级元素无视其存在而重叠渲染；clear: both必须加在浮动元素之后的非浮动块级兄弟元素上才有效。
float 元素脱离文档流，后续块级元素“看不见”它
设置 float: left 或 float: right 后，该元素会从普通文档流中完全移除：父容器不再计算它的高度，后续的块级元素（如 <div>、<p>）也**不会为它留出垂直空间**。它们按原本的位置渲染，而这个位置常常和浮动元素的视觉区域重合——所以不是“盖上去”，是“挤到同一坐标了”。
常见现象包括：
- 父容器背景色/边框消失（Computed height 为
0px） - 紧随其后的
<div>顶部贴着页面顶部，像前面没东西 - 文字能绕行，但同级
<div>的背景却叠在浮动块上
clear: both 加在谁身上才有效？
clear: both 必须作用于**浮动元素之后、且处于普通文档流中的块级兄弟元素**，而不是浮动元素自己。
错误写法：.float-item { clear: both; } —— 它不生效，因为自身已脱离流，无“清除”可言。
立即学习“前端免费学习笔记（深入）”；
正确用法示例：
<div class="sidebar" style="float: left; width: 200px;"></div> <div class="main-content" style="clear: both;"></div>
注意点：
- 目标元素必须是块级（
display: block或默认块级标签） - 若中间夹着纯文本节点或
inline元素，clear可能不触发换行 -
clear: left/clear: right更精准，适合单侧避让场景
现代首选 display: flow-root 创建 BFC
给浮动元素的**直接父容器**加 display: flow-root，是最干净的解法：它显式创建一个 BFC，让父容器重新包含浮动子元素的高度，同时不裁剪 position: absolute 子项、不干扰 margin 折叠。
兼容性（2026 年主流环境已足够）：
- Chrome 64+、Firefox 58+、Safari 15.4+、Edge 79+
- 不支持 IE —— 如需兼容，回退用
overflow: hidden（但要确认无溢出内容）或::after伪元素 clearfix
别在 display: flex 或 display: grid 容器里还写 float：规范明确此时 float 会被忽略，看到重叠说明布局逻辑本身没理清。
为什么 float 不该用于整体布局？
浮动本意是图文混排，不是二维布局工具。用它做多栏结构，本质是 hack：
- 必须手动处理清除逻辑，一漏就塌陷
- 响应式断点里容易漏掉
clear或flow-root - 动画、阴影、圆角等会放大重绘范围，
clear: both还会回溯所有浮动节点，拖慢渲染
真正省事的做法：把 float 限制在 <img> 单独环绕场景；其他布局交给 display: flex 或 display: grid —— 它们天然包含子项高度，无需清除，gap 和对齐也更可控。
