clear:both 只对紧邻的浮动兄弟元素生效，若前无浮动或被非浮动块级元素隔开则无效；现代推荐用 display: flow-root 创建BFC自动包裹浮动。
clear:both 为什么有时不生效
不是 clear:both 失效，而是它只对「紧接着的浮动兄弟元素」起作用。如果目标元素前面没浮动元素，或者中间隔着非浮动的块级元素（比如 div 没设 float），clear 就完全没触发条件。
常见错误现象：clear:both 加了但内容还是卡在浮动右侧、位置没变、甚至被压到浮动下方却没撑开父容器。
- 检查目标元素前一个兄弟节点是否真有
float:left或float:right—— 如果前面是普通p或h3，clear不会回溯去“清理”更早的浮动 - 确保目标元素和浮动元素属于同一层 DOM 级别（同级兄弟关系），嵌套在不同容器里就无效
-
clear:both只影响自身定位，不修复父容器塌陷 —— 这是两个问题，别指望一个属性包治百病
替代 clear:both 的现代写法（更可靠）
用 display: flow-root 是目前最干净的解法：它让父容器形成 BFC，自动包含内部浮动，且不影响子元素布局流。比 clear 更直接，也避免加空标签或伪元素。
使用场景：需要包裹一组浮动子项并让父容器正确高度，同时不想改子项结构。
立即学习“前端免费学习笔记（深入）”；
-
flow-root兼容性好（Chrome 58+/Firefox 55+/Edge 79+），IE 不支持，但 IE 已淘汰 - 比
overflow:hidden安全：不会意外裁剪position:absolute子元素或阴影 - 比
::after { content:""; display:table; clear:both; }少一重样式依赖，逻辑更直白
示例：
.container { display: flow-root; }
.container > .float-left { float: left; }
clear:both 必须配合的 HTML 结构
要让它起作用，HTML 必须是「浮动元素 → 需清除的元素」紧邻排列。任何中间插入的非浮动块级元素都会打断这个链条。
错误结构：
<div class="float-left"></div> <p>一段文字</p> <div class="clear-both"></div>——
<p></p> 是普通块级元素，clear:both 对它前面的浮动无感知。
- 正确写法：浮动
div和清除div必须是同级、相邻兄弟 - 若中间必须插内容，把内容也放进浮动容器，或统一用
flow-root父容器包裹 - 移动端慎用：某些安卓 WebView 对
clear解析不稳定，优先走 BFC 方案
clear 属性值的实际差异
clear:left、clear:right、clear:both 并不是“清空所有浮动”，而是“等左边/右边/两边都无浮动元素再开始渲染”。它不改变浮动元素本身，只约束当前元素的起始垂直位置。
性能影响极小，但滥用会增加布局计算复杂度 —— 尤其在大量列表项中每个都加 clear:both。
-
clear:left只等左侧无浮动，右侧有浮动也不拦着，常用于多栏错落布局 -
clear:both最常用，但别把它当“清除浮动副作用”的万能开关 —— 它不管父容器塌陷，也不阻止后续元素继续绕浮 -
clear:none是默认值，显式写出来一般只为覆盖继承样式，无实际布局意义
真正难处理的，从来不是怎么加 clear，而是搞清浮动从哪来、该由谁负责收尾。BFC 是更上游的控制点，比在下游补 clear 稳定得多。
