浮动元素脱离文档流是因为设置Float后它从普通流中抽离，不再占据原位置且父容器无法感知其高度，导致高度塌陷、兄弟元素上移重叠及多列布局错位；clear通过强制元素避开浮动区域来修复，现代开发则优先使用flex、grid或BFC方案。
浮动元素为什么会脱离文档流
当对一个元素设置 float: left 或 float: right 后，它会从普通文档流中“抽离”——不再占据原来的位置，父容器无法感知它的高度。这导致父容器高度塌陷，后续兄弟元素会上移，覆盖或挤占本该被浮动元素撑开的空间。
不清除浮动的典型错乱现象
常见表现包括：
- 父容器
height变为0，背景色/边框消失 - 紧随其后的非浮动块级元素（如 、
- 多列浮动布局中，某列高度不一致时，下一行浮动元素从“空缺处”开始排列，造成视觉断层
clear 属性如何修复错乱
clear的作用不是“清除浮动本身”，而是让当前元素避开上方已浮动的元素。它强制浏览器在渲染该元素前，先“跳过”所有指定方向（left/right/both）的浮动区域。例如，在浮动列表末尾加一个
，就能迫使这个
移动到所有浮动元素下方，从而撑开父容器。立即学习“前端免费学习笔记（深入）”；
左栏右栏现代开发中更推荐的替代方案
虽然
clear能解决问题，但它依赖额外 dom 节点或伪元素，语义弱且维护成本高。实际项目中应优先考虑：- 用
display: flex替代浮动做横向布局 - 用
display: grid管理复杂二维结构 - 若必须兼容老浏览器，可用
overflow: hidden或overflow: auto触发 BFC（块级格式化上下文），间接包含浮动子元素——但注意这可能意外裁剪溢出内容或触发滚动条
真正需要清除浮动的场景，如今大多只出现在遗留代码维护或特定 css 动画配合中；多数错乱根源其实是没理解浮动的脱离行为，而非“忘了加 clear”。