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