clear: both 必须加在紧接浮动元素之后的块级元素上才有效，如后续的<p>、<div>或页脚容器；加给浮动元素自身或父容器均无效，且要求该元素与浮动元素同属一个父容器的同级兄弟节点。
clear: both 必须加在谁身上才有效
它只对「紧接在浮动元素之后的块级元素」起作用，不是加给浮动元素自己，也不是加给父容器。常见错误是给 <img> 或 <div class="float-left"> 加 clear: both，这完全无效——浮动元素已经脱离文档流，clear 对它没意义。
正确做法是：找到浮动元素后第一个需要“从下一行开始”的块级元素，比如后续的 <p>、<div> 或页脚容器，直接给它加 clear: both。
- 如果浮动后面是纯文本节点（没包裹标签），
clear无法生效，必须先用块级标签包住 - 该元素必须是块级盒：
display: block、display: table等；display: inline或display: flex会忽略clear - 它不继承，也不受浮动取消（如
float: none）自动影响，响应式断点里得手动重置为clear: none
clear: both 为什么有时加了也没反应
不是属性失效，而是触发条件不满足。最常被忽略的是 DOM 层级关系和浮动连续性。
- 目标元素前面必须有浮动兄弟元素；中间插了一个没浮动的
<h3>或<div>，clear就不会回溯去“清理”更早的浮动 - 浮动元素和清除目标必须属于同一父容器下的同级兄弟节点；嵌套在不同容器里，
clear视为无关联 - 父容器高度塌陷时，即使子元素加了
clear: both，视觉上也可能卡在错位位置——这是两个问题：clear解决定位，BFC 才解决塌陷 - 检查 DevTools 的 Computed 样式，确认
clear值确实被应用，且该元素未被其他布局模式（如 Flex/Grid）覆盖
display: flow-root 是比 clear: both 更干净的替代方案
如果你真正想解决的是「浮动导致父容器高度塌陷 + 后续内容错位」，直接用 display: flow-root 更可靠。它让父容器形成 BFC，自动包裹内部所有浮动子项，无需额外样式或伪元素。
立即学习“前端免费学习笔记（深入）”；
-
display: flow-root兼容 Chrome 58+ / Firefox 55+ / Edge 79+，IE 不支持但已淘汰 - 比
overflow: hidden安全：不会意外裁剪position: absolute子元素、阴影或下拉菜单 - 比
::after { content: ""; display: table; clear: both; }少一重样式依赖，逻辑直白 - 注意：它只作用于父容器，不影响子元素浮动行为本身；若还需控制某段文字避开浮动，仍需单独给那块加
clear: both
clear: left 和 clear: right 的实际差异别乱用
clear: both 是通用解法，但不是唯一解法。选错取值会导致右侧内容顶上来、布局偏移等意外效果。
-
clear: left只保证该元素上边框不低于**任意 float: left 元素的底部**，但右浮动仍可能贴着它的右边往上顶 -
clear: right同理，仅避让右浮动，左浮动照常干扰 - 导航栏中 logo 左浮、菜单右浮，若页脚只需避开右浮菜单，用
clear: right更精准，避免过度下推 - 性能无差别，但语义准确能减少协作误解和后期调试成本
transform、contain 或其他原因创建了新格式化上下文，clear 就会失效——这时候再怎么调 clear 值都没用，得先理清 BFC 层级。 
