clear: both加在父元素上无效，因其仅对同级块级兄弟元素生效，控制的是该元素是否避开前面浮动，而非让父容器包含浮动子项；真正起作用的位置是所有浮动子元素之后、父容器内的一个直系块级子元素上。
父元素无法自适应高度，是因为 float 让子元素彻底脱离文档流——父元素在布局计算时根本“看不见”它们的高度，不是 bug，是 CSS 2.1 规范的明确行为。
为什么 clear: both 加在父元素上没用
clear: both 只对**同级块级兄弟元素**生效，它控制的是“这个元素要不要避开前面的浮动”，而不是“让父容器包含浮动子项”。写在父元素上，CSS 解析器会忽略该声明——语法合法，但语义无效。
- 真正起作用的位置：所有浮动子元素之后、父容器内部的一个直系子元素上
- 该元素必须是块级（
display: block或display: table） - 不能被
display: none或visibility: hidden隐藏
为什么 overflow: hidden 有时也不撑高
overflow: hidden 是靠触发 BFC 来间接包含浮动子项，但它不是万能的。一旦父元素本身有约束，BFC 就失效：
- 父元素设置了
height或max-height（哪怕只是height: 100%）→ 高度被锁死 - 父元素是
position: absolute且未设top/bottom→ 高度计算异常 - 父元素已用了
display: flex或display: grid→overflow不再触发传统 BFC
调试时先看 computed height 是否为 auto；临时删掉 float，确认高度是否立刻恢复。
现代项目该用 display: flow-root 还是伪元素 clearfix
display: flow-root 是目前最干净的解法：它明确创建 BFC，不带 overflow 的裁剪副作用，也不依赖伪元素或额外 DOM 节点。
- 兼容性：Chrome 58+、Firefox 全版本、Safari 15.4+，2026 年已可放心使用
- 伪元素
::after方案容易静默失败：比如父元素加了transform或filter，会干扰清除逻辑 - 如果必须兼容 IE8–9，才考虑
overflow: hidden或经典 clearfix；否则别碰
真正难处理的不是“怎么撑高”，而是“撑高之后内容怎么对齐”——vertical-align 对 float 元素完全无效，height: 100% 在浮动上下文中又容易陷入死循环。这时候该想的不是修 float，而是换 Flex 或 Grid。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
