用 display: flow-root 触发 BFC 解决浮动塌陷，兼容老浏览器可用伪元素 clearfix；避免 overflow: hidden 裁剪内容；float 仅适用于图文环绕等特定场景。
浮动子元素让父容器高度塌陷怎么办
父容器高度变成 0，背景、边框消失，后续元素上移——这不是 bug，是 float 的规范行为。父容器在布局时直接忽略所有脱离文档流的子元素，只按非浮动内容撑高。
常见错误是给父容器加 clear: both，这完全无效：clear 只对兄弟块级元素生效，不作用于自身。
- ✅ 推荐用
display: flow-root：一行 CSS 触发 BFC，包裹浮动子项，无裁剪、无 margin 合并副作用，Chrome 58+/Firefox 57+/Safari 10.1+ 均支持 - ✅ 兼容老浏览器（如 IE11）时，用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }，必须带content和display，漏掉任一都失效 - ⚠️ 避免
overflow: hidden：虽能触发 BFC，但可能意外裁剪box-shadow、下拉菜单或position: absolute子元素
浮动导致点击区域错位或页脚上浮怎么修
视觉上按钮还在原位，点下去却触发了下方内容——本质是父容器高度塌陷后，后续元素“顶上来”覆盖了原本浮动元素占据的空间，交互区域和渲染位置脱节。
用开发者工具选中点击元素，在 “Computed” 面板里看 bounding box 是否与视觉一致。如果不一致，说明仍有脱离流的干扰。
立即学习“前端免费学习笔记（深入）”；
- 检查点击区域所在元素本身是否被误设了
float或position: absolute - 确认父容器没设固定
height或max-height，否则内容溢出会被裁剪 - 若已加
clearfix仍错位，可能是父容器是flex或grid容器——此时::after默认不参与主轴排列，需额外加flex: 0 0 100%或直接换用display: flow-root
浮动父容器里 absolute 子元素定位错乱怎么调
写了 top: 20px 却飞到页面左上角？不是 top 写错了，而是浮动父容器没形成 BFC、高度塌陷，导致 absolute 元素的“包含块”向上回溯到了 body 或更外层祖先。
用开发者工具选中该元素，在 “Computed” 里看 containing block 字段，如果不是你写的父容器，就坐实了这个问题。
- ✅ 最干净解法：
display: flow-root给浮动父容器，既撑高又提供稳定定位上下文 - ❌ 别给父容器加
position: relative就完事：它虽能当锚点，但不解决塌陷；若外层还有已定位祖先，absolute 仍会跳过去 - ⚠️ 注意负 margin 干扰：父容器内子元素用了
margin-top: -Xpx，会改变 absolute 元素的 top 计算基准线，优先改用border-box+ 统一边框控制
现在还该用 float 布局吗
除非你在做图文环绕（比如文章里图片左浮动、文字绕排），否则基本不该再用 float 做整体布局。
Flex 和 Grid 天然不脱离文档流，父容器高度自动包含子项，没有塌陷、错位、清除逻辑这些历史包袱。很多调试时间，其实本可以省下来把 float: left 换成 display: flex。
真正难的不是写清除代码，而是判断什么时候该放弃 float —— 它不是过时，而是归位：从布局工具，退回到语义明确的排版辅助角色。
