优先用 display: flow-root 触发 BFC 清除浮动，语义清晰副作用小；兼容 IE8 则用 ::after 伪元素清除；clear: both 仅对紧跟浮动后的块级盒生效，遇 flex/grid 或 inline 元素即失效。
浮动元素后面的内容紧贴着上边，没空隙
这是浮动元素脱离文档流后最典型的视觉错位——父容器高度塌陷，后续兄弟元素直接“顶”到浮动元素底部，看起来像没留 margin。根本不是 margin 没生效，而是容器压根不知道自己该有多高。
常见错误现象：margin-top 加在浮动后的块级元素上完全无效；父容器背景色或边框只显示一条细线；用 outline 查看布局时发现父容器高度为 0。
- 别给浮动后的元素硬加
margin-top，它还在正常流里，但父容器没包裹住浮动子项 - 优先在父容器上触发 BFC（比如加
overflow: hidden或display: flow-root），这是现代写法中最干净的解法 - 旧项目兼容 IE8？用
::after伪元素清除浮动更稳妥，但必须确保父容器没有height或min-height覆盖清除效果
clear: both; 不起作用，内容还是重叠
clear: both 本身没错，但它只对「紧跟在浮动元素之后、且处于同一格式化上下文」的块级盒生效。如果中间隔着 inline 元素、position: absolute 盒子，或者父容器用了 flex / grid，它就直接失效。
使用场景：老式表单布局、新闻列表卡片下方需要清底的分隔线。
立即学习“前端免费学习笔记（深入）”；
- 确认目标元素是块级元素（
display: block或默认块级） - 检查它是否被包裹在
display: flex容器里——flex 项不响应clear - 避免和
float混用在同一个元素上，float会让clear行为变得不可预测
display: flow-root 和 overflow: hidden 哪个更好
display: flow-root 是专为清除浮动设计的新值，语义清晰、副作用小；overflow: hidden 是借副作用达成目的，容易意外裁剪内容或禁用滚动。
性能影响几乎可以忽略，但兼容性差异明显：IE 完全不支持 flow-root，而 overflow: hidden 从 IE6 就存在。
- 新项目、无需兼容 IE？无条件选
display: flow-root - 要兼容 Safari overflow: hidden，但记得检查是否有溢出内容被截断
- 如果父容器本身就需要滚动（比如侧边栏菜单），
overflow: auto也能触发 BFC，比hidden更安全
Flex/Grid 布局里还用得着清除浮动吗
基本不用。一旦父容器设了 display: flex 或 display: grid，子元素自动脱离传统文档流规则，float 对布局不再起作用（虽然仍会触发行内盒的文本环绕等表现）。
容易踩的坑：把 float 和 flex 混着用，以为能微调位置，结果浮动元素被当成普通 flex item 处理，clear 和清除技术全部失效。
- Flex/Grid 容器中，
float的唯一合理用途只剩文本环绕（配合shape-outside） - 如果看到浮动元素在 flex 容器里“卡住”或尺寸异常，第一反应不是清浮动，而是删掉
float - 迁移老代码时，别保留冗余的
::after { content: ""; clear: both; }，它不会报错，但纯属噪音
浮动本身没死，但它的布局职责已经被 Flex 和 Grid 接管；现在还手动清浮动，往往意味着你正在维护一段没被重构的旧逻辑——这时候最该警惕的，不是清除方式对不对，而是“为什么这里还在用 float”。
