clear: both 仅对紧跟浮动后的块级元素有效，加在浮动元素自身或 inline 元素上无效；现代推荐用 display: flow-root 或 flex/grid 布局替代。
加 clear: both 能解决大多数浮动导致的错位，但不是贴上就灵——它只在特定位置、对特定元素生效，用错地方反而让布局更乱。
为什么 clear: both 有时没反应
最常见原因是目标元素根本“看不见”前面的浮动，或者它自己不具备触发清除的资格：
-
clear只对块级元素有效；<span>、<em>这类 inline 元素加了也白加，得先设display: block或display: flow-root - 目标元素必须紧跟在浮动元素之后——中间插了一个
<p>或<div>（哪怕没浮动），clear就只检查它前一个兄弟，不会往前翻两层 - 父容器如果已触发 BFC（比如设置了
overflow: hidden、display: flow-root或display: flex），内部浮动已被包裹，此时再给子元素加clear不仅无效，还可能干扰原本正常的流式行为 - 浏览器计算样式里
clear显示为none？查查是不是被更高优先级的选择器（比如 ID 或!important）覆盖了
clear: both 应该加在哪个元素上
不是加在浮动元素自己身上，而是加在「想让它回到正常流起点」的那个后续元素上。典型场景有两类：
- 浮动子元素导致父容器塌陷 → 给父容器加
clearfix类（用::after伪元素），而不是给子元素加clear - 浮动模块（如侧边栏）把下面的
<footer>吸到右边 → 给<footer>加clear: both，且确保它在 HTML 中紧接在浮动容器之后 - 错误示范：
<div style="clear:both"></div><div class="float-left">内容</div>—— 清除元素在浮动之前，等于清了个寂寞
比 clear: both 更稳的现代写法
如果你控制得了父容器样式，优先考虑不依赖清除逻辑的方案：
立即学习“前端免费学习笔记（深入）”；
- 给父容器设
display: flow-root：专为解决浮动塌陷而生，无副作用，Chrome 58+/Firefox 53+ 均支持 - 用
overflow: hidden或overflow: auto：兼容性极好，但注意会裁剪position: absolute子元素超出部分或box-shadow - 直接换布局模型：浮动本就不该用于整体页面结构，
display: flex或display: grid下，子元素天然参与高度计算，clear根本没出场机会
真正容易被忽略的是嵌套浮动：外层容器用了 clearfix，里面某个子模块又单独浮动了一组元素，那这个子模块的父容器也得单独清理——浮动影响不会自动穿透层级，得一层一层确认。
