clear: both 能撑开父容器高度，是因为它使元素在文档流中占位并下移至浮动元素下方，从而让父容器获得真实高度；必须加在浮动元素之后的非浮动兄弟元素上，而非浮动元素自身。
clear: both 为什么能撑开父容器高度
浮动元素会脱离文档流，导致父容器无法自动包裹它们，出现高度塌陷。设置 clear: both 的元素会强制移动到所有浮动元素下方，从而“撑开”父容器——本质是它在文档流中占位，且位置受浮动影响而下移，父容器因此获得真实高度。
常见错误是把 clear: both 加在浮动子元素上，这毫无作用；必须加在浮动元素之后、仍处于文档流中的兄弟元素上，或者用伪元素模拟这个“后续元素”。
- ✅ 正确：在最后一个浮动子元素后加一个空
<div style="clear: both"></div> - ❌ 错误：给浮动的
<div class="float-left"> 自己设 <code>clear: both（它已经左浮，clear 对它定位无意义） - ⚠️ 注意：
clear: both只对块级元素生效；行内元素即使设了也不会触发清除行为 -
clear: both不影响内部溢出，子元素超出父容器仍可正常显示（比如下拉菜单、tooltip） -
overflow: hidden会裁剪所有溢出内容，且可能干扰 position: fixed 元素的定位上下文 - 现代项目中，更推荐用伪元素方案：
::after { content: ""; display: table; clear: both; }，兼顾语义与无 DOM 污染 - 检查父容器是否设置了
display: flex或display: grid - 此时应改用
align-items、justify-content或place-items控制对齐，而非浮动 - 若需兼容老代码混用，务必确认浮动元素未被包裹在 flex/grid 容器内
- 移除
-webkit-overflow-scrolling: touch（iOS 16+ 已弃用，且该属性本身易引发重排问题） - 给清除元素加
transform: translateZ(0)强制硬件加速，有时可绕过渲染层错位 - 更稳妥的做法是放弃
clear，改用display: flow-root（现代浏览器支持良好，Safari 15.4+ 已支持）
clear both 和 overflow: hidden 哪个更安全
clear: both 是显式、语义明确的清除方式，但需要额外 DOM 节点或伪元素；overflow: hidden 是借由 BFC 触发隐式清除，不加节点但有副作用。
关键区别在于布局约束：
立即学习“前端免费学习笔记（深入）”；
clear both 在 Flex/Grid 布局里还起作用吗
不起作用。Flex 容器和 Grid 容器自身就形成新的格式化上下文（类似 BFC），子项即使设了 float 也会被忽略——CSS 规范明确要求：浮动在 flex item 和 grid item 上无效。
所以如果你看到 clear: both 在 Flex 容器里“没反应”，不是写错了，而是浮动根本没生效：
移动端 Safari 中 clear both 失效的典型原因
不是 clear 本身失效，而是触发了 iOS Safari 的一个渲染 bug：当父容器存在 -webkit-overflow-scrolling: touch 且高度由内容撑开时，clear: both 元素可能被错误地提升到浮动元素同一行。
临时解法有限，优先排查：
真正麻烦的从来不是怎么写 clear，而是你不确定它在哪一层布局模型里还被当作有效指令。
