浮动导致父容器高度塌陷是规范行为，解决方法有触发BFC（如display: flow-root）或清除浮动（如clearfix伪元素），clear: both加在浮动元素自身无效。
子元素加了 float 后父容器高度变成 0，不是 bug，是 CSS 规范行为——浮动元素脱离文档流，父容器自然“看不见”它。解决核心就两条路：让父容器重新包含子项（触发 BFC），或在浮动流末尾插入一个占位并清除（clear: both）。
为什么 clear: both 加在浮动子元素自己身上没用？
很多人写成：.child { float: left; clear: both; }，结果父容器还是塌陷。因为 clear 只影响自身外边距，告诉浏览器“我别挨着前面的浮动”，不改变父容器的布局计算逻辑。它既不触发 BFC，也不让父容器重新包含子项。
-
clear: both必须作用于浮动元素之后、且仍在普通文档流中的元素上（比如伪元素或空<div>） - 给浮动元素自己加
clear，只是让它往下挪一格，依然脱离文档流 - 真正起作用的清除点，必须出现在所有浮动子元素渲染顺序的“之后”
.clearfix::after 三要素缺一不可
标准写法：.clearfix::after { content: ""; display: table; clear: both; }。漏掉任意一项，都可能失效。
-
content: ""：伪元素不渲染内容，但必须存在，否则不参与布局 -
display: table：关键！比block更稳——天然创建 BFC，兼容 IE8+，且不会继承line-height导致额外空白 -
clear: both：确保清除发生在所有浮动子元素之后，把“流”拉回来 - IE8 及更老浏览器需降级为单冒号写法：
.clearfix:after；IE6/7 还要加*zoom: 1触发 hasLayout
display: flow-root 是现代首选，但要注意兼容性
这是 CSS 新增的标准属性，专为解决这类问题设计：.parent { display: flow-root; }。语义清晰、代码极简、无副作用。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 它直接让父容器创建新的 BFC，自动包含内部浮动子元素
- 不依赖伪元素，不污染 DOM，也不影响其他样式（比如
overflow: hidden可能裁剪内容） - CanIUse 显示：Chrome 65+、Firefox 57+、Safari 15.4+、Edge 79+ 全支持；iOS Safari 15.4+ 起支持
- 若项目需兼容 iOS 14 或 Android WebView 旧版本，仍建议 fallback 到
.clearfix
慎用 overflow: hidden 的隐藏风险
写成 .parent { overflow: hidden; } 确实能快速触发 BFC，但副作用真实存在。
- 所有溢出内容会被裁剪，包括下拉菜单、tooltip、绝对定位弹层等——你不一定立刻发现
- 滚动条行为变化：设
auto可能意外出现滚动条；设scroll会强制显示滚动条 - 某些动画或 transform 场景下，
overflow可能干扰渲染层，导致闪烁或性能下降 - 它本质是“借副作用解决问题”，而非直击根源，维护时容易被误删
最常被忽略的是：伪元素清除法里 display: table 不可替换为 inline-block 或 flex ——前者不触发 BFC，后者虽能撑高但会改变子元素排版流。真正稳的解法，永远围绕“让父容器重新感知子项存在”这个目标来选，而不是哪个写起来最短。
