浮动元素脱离文档流致父容器高度塌陷，后续内容按塌陷后布局而“被顶走”；clear: both仅作用于自身且不解决塌陷，overflow: hidden或display: flow-root可创建BFC清除浮动。
浮动元素为什么会让后续内容“被顶走”
因为浮动元素脱离了普通文档流，父容器高度会塌陷，导致后面的块级元素直接“上浮”到浮动元素旁边或下方空隙里——这不是bug，是CSS规范定义的行为。关键在于父容器没把浮动子元素“包住”，后续内容自然按塌陷后的父容器位置布局。
clear: both 为什么经常失效
clear: both 只对它自身生效，作用是“不让自己的上边界紧贴前面的浮动元素”，但它不解决父容器塌陷问题。常见错误是只给最后一个子元素加 clear，结果父容器依然高度为0，后续内容照样错位。
- 加在浮动元素后面一个空
<div></div>上，且该<div>必须是块级、未浮动、且在DOM中位于浮动元素之后 - 如果这个清除元素被设为
display: inline或float: left，clear就无效 - 用
clear: both的元素不能是绝对定位（position: absolute），否则脱离文档流，清除行为不触发
推荐用 overflow: hidden 清除浮动的条件
给浮动元素的**直接父容器**设置 overflow: hidden（或 auto、scroll）是最轻量的清除方式，原理是创建BFC（块级格式化上下文），强制父容器包含所有浮动子元素。
- 仅适用于父容器不需要溢出内容可见的场景；设了
hidden后，子元素超出宽高的部分会被裁剪 -
overflow: auto在某些旧版 Safari 中可能意外触发滚动条，overflow: hidden更稳妥 - 不能和
position: absolute或transform同时用于同一父容器，否则BFC创建可能被干扰（尤其在较老浏览器中）
现代项目优先用 display: flow-root
display: flow-root 是专为解决这个问题设计的值，效果等同于创建BFC，但语义清晰、无副作用，且不会影响溢出行为。
立即学习“前端免费学习笔记（深入）”；
- 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+；如需支持IE或老Safari，需回退到
overflow: hidden - 比伪元素清除法更简洁，不用写额外HTML或CSS hack
- 注意不要和
display: inline-block混用——后者也会创建BFC，但会带来额外的基线对齐和空白间隙问题
overflow: hidden 最快；如果要长期维护、兼容新浏览器，display: flow-root 是最干净的选择。伪元素清除（::after { content: ""; display: table; clear: both; }）现在基本只用于兜底兼容老环境。 
