浮动元素不能触发父容器自适应高度，因其脱离文档流导致父容器布局计算时忽略其高度；clear: both 对父容器无效，需加在浮动后的兄弟块级元素上；overflow: hidden 通过触发bfc间接解决但有裁剪等副作用；现代布局应优先使用flex/grid，它们天然包含子项高度。
浮动元素不能触发父容器自适应高度，是因为它们从普通文档流中被完全移除——父容器在布局计算阶段压根不把它们当“内容”，自然不会用它们的高度去撑开自身。
float 元素脱离文档流是规范行为，不是 bug
只要子元素设置了 float: left 或 float: right，它就不再参与父容器的 height 计算。哪怕你写了 height: 500px、min-height: 200px，父容器的 height: auto 仍会返回 0（或仅剩行高/内边距）。这不是渲染错误，而是 CSS 2.1 规范明确定义的行为。
常见表现包括：
- 父容器背景色只显示一条细线
- border 塌陷成单边
- 后续兄弟元素直接叠在浮动块上方
-
padding在视觉上“失效”
clear: both 加在父容器上根本没用
clear: both 只对处于同一浮动上下文中的**兄弟块级元素**生效，它控制的是“这个元素要不要避开前面的浮动”，而不是“让父容器包含浮动子项”。把 clear: both 写在父容器上，CSS 解析器直接忽略——语法合法但语义无效。
真正起作用的位置是：
- 一个位于所有浮动子元素之后的、**父容器的直系子元素**上
- 该元素必须是块级（
display: block或display: table） - 不能被
display: none或visibility: hidden隐藏
overflow: hidden 能撑高，但副作用常被低估
overflow: hidden 是通过触发 BFC（块级格式化上下文）间接让父容器重新包含浮动子项的高度。但它不是“清除浮动”，而是重建容器边界。
容易踩的坑：
- 所有超出父容器的
position: absolute子元素（如下拉菜单、tooltip）会被裁剪 - 在 Safari 中，
overflow: auto可能无故出现空白滚动条，尤其配合负margin时 - 如果父容器本就需要溢出表现（比如卡片 hover 浮层），加了
overflow: hidden就等于主动禁用功能 - 后期维护者可能误以为这只是“防溢出”，随手删掉，导致高度塌陷重现且难以定位
现代项目里最该问的是：还非得用 float 吗？
一旦你给父容器设了 display: flex 或 display: grid，子元素上的 float 属性会被浏览器直接忽略。Flex 和 Grid 天然不脱离文档流，父容器高度自动由子项撑开，clearfix、overflow、伪元素全都不需要。
但要注意：
-
flex-direction: row下，父容器高度由最高子项决定；column下则累加 - Grid 中若只写了
grid-template-columns却没配grid-template-rows，行轨道默认为auto，空行或无内容行就真没高度 - 别在 Flex/Grid 容器上滥用
height: 100%——它依赖父级有显式高度，容易陷入循环依赖
真正卡住的点，往往不是清除没写对，而是没确认子元素是否真的在浮动：打开开发者工具，看 computed 样式里的 float 值是不是 none。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
