clear用于让元素外边距上沿下移至指定方向浮动元素下边缘之下，从而拉回正常文档流；常用clear: both，但需确保目标为块级元素且未被BFC容器包裹或CSS覆盖。
浮动导致后续元素上移，怎么用 clear 拉回正常流
浮动元素会脱离文档流，后面紧邻的块级元素会“看不见”它，直接从顶部开始布局，造成视觉上的错位。这不是 bug，是浮动的本意——但多数时候你只是想让文字绕图、或做简易多列，又不希望影响下面模块的位置。
clear 的作用就是告诉浏览器：“这个元素的**外边距上沿**，必须下移到所有指定方向浮动元素的**下边缘之下**”。它不改变浮动本身，只约束后续元素的起始位置。
-
clear: left：下移直到左边没有浮动元素 -
clear: right：下移直到右边没有浮动元素 -
clear: both：下移直到左右两边都无浮动元素（最常用） -
clear: none（默认值）：不避开任何浮动
为什么加了 clear: both 还没效果
常见原因是目标元素根本没触发块格式化上下文（BFC），或者被其他 CSS 规则覆盖。比如：
- 目标元素是
inline元素（如<span>），clear对它无效 —— 必须是块级元素或设为display: block - 父容器用了
overflow: hidden或display: flow-root，内部浮动已被包含，此时子元素加clear就没意义了 - CSS 优先级问题：
clear被更具体的规则（如 ID 选择器）设为none，需检查计算样式
验证方法：在开发者工具中选中该元素，看 clear 是否出现在“Computed”标签页里，且值不是 none。
立即学习“前端免费学习笔记（深入）”；
比 clear 更现代的替代方案有哪些
clear 是为解决浮动副作用而生的补丁，现在有更干净的解法：
-
display: flow-root：给浮动元素的**父容器**设置，它会创建 BFC，自动包裹浮动，无需子元素清浮动 -
overflow: hidden或overflow: auto：老式但兼容性好，原理同上，但可能意外截断阴影或下拉菜单 - 改用
flexbox或grid布局：彻底抛弃浮动，比如用display: flex替代浮动导航栏，后续模块自然不受影响
注意：float 在响应式布局中已基本被淘汰，仅在图文混排等极少数场景仍有价值。如果只是为了多列，display: grid 或 column-count 更可控。
一个典型的修复示例：浮动侧边栏后主内容错位
假设你有侧边栏 aside 和主内容 main，都设了 float: left，但底部的 footer 跑到了侧边栏高度一半的位置：
.aside {
float: left;
width: 200px;
}
.main {
float: left;
width: calc(100% - 200px);
}
footer {
clear: both;
}关键点：不是给 .main 加 clear，而是给真正需要“回到正常流”的那个元素（这里是 footer）加。如果 footer 仍没下到底部，请检查它是否被设为 inline、或父容器有 height 限制、或存在 margin 折叠。
浮动布局的脆弱性就在这里：一个地方没清干净，整条流就偏了；而 clear 只治标，不治本。真正要稳，得从根上放弃浮动驱动布局。
