浮动导致父容器高度塌陷，子元素margin看似失效实为脱离文档流；clearfix通过伪元素触发BFC并清除浮动，是最稳妥兼容方案；现代布局应优先使用flex/grid，其天然具备BFC且float自动失效。
浮动元素导致父容器高度塌陷，子元素margin不生效
这是 CSS 浮动布局中最常被误认为“margin 没起作用”的现象：父容器没设高度，里面全是 float: left 的子元素，结果父容器高度为 0，子元素的 margin-top 或 margin-bottom 看起来“消失”了——其实不是 margin 失效，而是父容器根本没包裹住它们，margin 自然悬在文档流外。
典型场景是用浮动做多栏布局（比如侧边栏 + 主内容），或老式导航菜单。现代开发中应优先用 flex 或 grid，但维护旧项目时绕不开这个。
- 别给父容器硬写
height或min-height，治标不治本，响应式下容易错位 - 别只在最后一个浮动子元素加
clear: both，它只能撑开底部，顶部 margin 仍可能被忽略 - 浮动元素的
margin本身是生效的，只是父容器没形成 BFC，无法包含它
clearfix 方案：用伪元素触发 BFC 并清除浮动
最稳妥、兼容性好（IE8+）、不影响语义的解法，是在父容器上加一个 clearfix 类，利用 ::after 生成内容并清除浮动。
关键不是“清浮动”，而是让父容器**重新建立块级格式化上下文（BFC）**，从而包含内部浮动元素和它们的 margin。
立即学习“前端免费学习笔记（深入）”；
.clearfix::after {
content: "";
display: table;
clear: both;
}
-
content: ""是必须的，否则伪元素不渲染 -
display: table触发 BFC（比block更可靠，避免 IE6/7 下某些 margin 合并问题） - 不要用
display: block+clear: both单独一行，它在部分旧浏览器中无法撑开父容器顶部 margin - 如果项目需支持 IE6/7，可补一句
*zoom: 1（触发 hasLayout）
overflow: hidden 不是万能清除浮动方案
给父容器设 overflow: hidden 确实能触发 BFC、解决塌陷，但它会**意外裁剪溢出内容**，比如下拉菜单、阴影、定位元素移出父容器时就被截断。
这在实际项目中非常隐蔽：开发时看不出问题，上线后用户反馈“下拉菜单点不开”“卡片阴影没了”，排查半天才发现是 overflow: hidden 在作怪。
- 仅当确认父容器内**绝不会有溢出内容**时才用，比如固定尺寸的头图容器
-
overflow: auto和scroll会加滚动条，体验更差 - 它和
clearfix的本质区别：前者靠 BFC 包含浮动，后者靠生成元素清除浮动并顺带触发 BFC - 现代 CSS 中，
display: flow-root是更干净的替代（Chrome 64+/Firefox 59+），但兼容性不如 clearfix
Flex/Grid 布局下无需清除浮动，但要注意遗留代码混用
一旦父容器设了 display: flex 或 display: grid，子元素的 float 属性自动失效（规范规定），此时再写 float 不仅无意义，还可能干扰对齐行为。
常见踩坑是迁移老代码时，只改了父容器为 flex，却忘了删子元素的 float，结果布局错乱、margin 表现异常。
- Flex/Grid 容器天然具备 BFC，子元素 margin 正常生效，无需任何清除手段
- 检查开发者工具里子元素的
float是否被划掉（computed 标签页里显示none） - 如果必须保留浮动（比如第三方组件强制加了 class），用
float: none !important覆盖 - 注意
align-items或justify-content可能覆盖子元素 margin 效果，这不是 bug，是 Flex 布局的正常行为
clearfix 最稳，新项目直接换 flex，但混用时那个残留的 float 往往就是半夜三点上线后找不到的 bug。 
