clear: both 清除的是当前元素前面的浮动兄弟元素，而非自身或后续元素；它仅对同层、已渲染且未脱离当前bfc的浮动元素生效，不解决父容器塌陷问题。
clear: both 是在清除谁的浮动？
它不是清除当前元素自己的浮动（Float），而是告诉浏览器：“我这个元素，**不允许被前面浮动元素的盒模型影响位置**”。换句话说，clear: both 的作用对象是「它前面的浮动兄弟元素」，不是自己，也不是后面的元素。
常见错误现象：
给一个 div 加了 clear: both，但页面没变化——很可能它前面压根没有浮动元素，或者浮动元素不在同一个块级格式化上下文（BFC）里。
- 只对「紧邻的、已渲染的、同层的浮动兄弟元素」起作用
- 如果浮动元素被
overflow: hidden或display: flow-root包裹，就脱离了当前 BFC，clear对它无效 -
clear: left和clear: right同理，只分别避开左浮或右浮元素，不是“半清除”
为什么 clear: both 不总能撑开父容器高度？
因为 clear 本身不触发 BFC，也不改变父容器的布局参与方式。父容器塌陷的根本原因是子元素全部浮动后脱离文档流，而 clear 只是让某个子元素“往下挪”，并不把父容器拉回正常流中。
使用场景：你加了 clear: both 在最后一个浮动子元素后面，但父容器依然高度为 0——这不是 clear 失效，是它本来就没这个职责。
立即学习“前端免费学习笔记（深入）”；
- 真正能撑开父容器的是建立新 BFC：
overflow: hidden、display: flow-root（推荐）、或伪元素::after { content: ""; display: table; clear: both; } -
clear: both配合display: block元素（如<div></div>）可以实现视觉上“清空浮动区域”，但不解决父容器塌陷 - 现代项目优先用
display: flow-root，语义清晰、无副作用、兼容性足够（chrome 64+/firefox 59+/safari 15.4+）
clear: both 在 flex/Grid 布局里还有用吗？
基本没用。Flex 容器和 Grid 容器的子项默认不参与常规文档流的浮动机制，float 属性在它们内部会被忽略（除少数例外，如 float 仍影响文字环绕，但不影响布局位置），所以 clear 自然失去作用对象。
容易踩的坑：在 Flex 容器里给子项写 clear: both，还纳闷为什么没反应——不是写错了，是它根本没意义。
- Flex 子项对齐靠
justify-content/align-items，不是靠清除浮动 - Grid 中行/列定位靠
grid-row/grid-column，浮动和清除都无关 - 若混用浮动与 Flex（比如浮动文字环绕 Flex 卡片），
clear只影响文字流，不影响 Flex 容器自身
替代 clear: both 的现代写法有哪些？
不是所有老习惯都要保留。clear: both 是 css2.1 时代的补救方案，现在有更直接、更可控的方式处理浮动遗留问题。
性能与兼容性影响：display: flow-root 比伪元素 + clear 更轻量，不产生额外 dom 节点，也避免了 table 显示类型带来的隐式行为（比如默认 border-collapse 行为）。
- 撑开父容器：用
display: flow-root替代伪元素 clearfix - 需要“隔断”浮动影响（如图文混排）：用
contain: layout或overflow: auto（注意滚动条副作用） - 必须兼容 IE8？那只能继续用伪元素 +
clear: both，但得确认父容器没设置height或min-height覆盖了清除效果
事情说清了就结束。真正难的不是记住 clear: both 怎么写，而是判断「此刻到底需不需要清除」——很多时候，问题根源不在浮动没清掉，而在布局模型选错了。