最稳妥的清除浮动方法是给容器添加.clearfix类，而非仅用ID选择器；其伪元素需同时满足content: ""、display: table、clear: both三条件；现代推荐display: flow-root（Chrome64+等支持），overflow:hidden则有裁剪等隐患。
用 .clearfix 类配合 ID 选择器直接清除浮动
直接给目标容器加 clearfix 类是最稳妥的做法，而不是试图用 ID 选择器“覆盖”浮动行为。CSS 本身没有“清除某个 ID 内所有浮动”的原生语法，clear: both 只作用于自身，不能自动影响子元素的浮动坍塌。所以必须让容器自己参与 BFC 创建或触发清除逻辑。
-
clearfix是一个经典、稳定、兼容性好的方案，核心是利用伪元素在容器末尾插入并清浮动 - 不要写成
#my-container::after { clear: both; }—— 这样伪元素没设display: table或block，且没触发 BFC，实际无效 - ID 选择器和
clearfix类可以共存：<div id="my-container" class="clearfix">，这样语义清晰、复用方便
::after 伪元素必须满足三个条件才能生效
很多自定义 clearfix 失败，是因为漏掉其中一环。标准写法中，::after 必须同时满足：
- 设置
content: ""（空字符串也必须写，否则伪元素不渲染） - 设置
display: table或block（推荐table，避免 margin 折叠干扰布局） - 设置
clear: both（这才是真正起清除作用的声明）
常见错误示例：#my-container::after { content: ""; clear: both; } —— 缺少 display，伪元素不占空间，清除无效。
现代替代方案：用 display: flow-root 更简洁
如果不需要支持 IE，display: flow-root 是比 clearfix 更干净的解法。它强制容器生成一个新的块级格式化上下文（BFC），天然包裹内部浮动子元素，无需伪元素。
立即学习“前端免费学习笔记（深入）”；
- 只需一行：
#my-container { display: flow-root; } - 兼容性：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+；IE 完全不支持
- 性能略优：无伪元素开销，DOM 节点更轻量
- 注意：它会重置某些继承行为（比如
margin-collapse消失），若页面依赖外边距合并，需额外检查布局变化
ID 选择器里写 overflow: hidden 看似简单但有隐患
不少人用 #my-container { overflow: hidden; } 应急，它确实能触发 BFC 并包裹浮动，但副作用明显：
- 内容溢出会被裁剪（比如下拉菜单、tooltip、负 margin 元素、transform 位移超出部分）
- 滚动条可能意外出现（尤其在 Safari 中，
overflow: hidden有时仍显示空滚动条） - 与
position: absolute子元素的包含块关系可能改变，导致定位偏移 - 可访问性风险：屏幕阅读器可能忽略被裁剪区域的内容
除非你明确控制所有子元素尺寸且无溢出需求，否则别把它当 clearfix 用。
最易被忽略的一点：清除浮动的本质不是“消灭 float”，而是让父容器重新计算高度并建立独立格式化上下文。选方案前先确认目标浏览器范围和是否允许 DOM 修改 —— 加类最通用，flow-root 最现代，伪元素最可控，overflow 最危险。
