父容器塌陷是因为浮动元素脱离文档流，导致父容器无法感知其高度；解决需触发bfc（如display:flow-root）并配合padding-bottom+box-sizing对齐文字基线，现代布局应优先选用grid或flex。
浮动元素高度不一致时，父容器为什么会塌陷？
因为 float 元素脱离文档流，父容器完全“看不见”它们的高度。哪怕子项实际高 200px，父容器 computed height 可能还是 0 —— 这不是 bug，是 float 的原始行为。后续元素会直接上浮到浮动区里，布局彻底错乱。
常见错误现象：height: auto 的父容器背景色消失、边框不显示、margin-bottom 失效；调试时用 DevTools 看不到父容器包裹子项。
- 必须先触发 BFC 让父容器重新“感知”浮动子项：推荐
display: flow-root（无副作用，现代浏览器全支持） - 次选伪元素清除法：
.parent::after { content: ""; display: table; clear: both; } - 慎用
overflow: hidden：可能意外裁剪position: absolute下拉菜单或阴影
怎么让不同高度的浮动元素视觉上对齐？
别硬设 height。内容长度一变就溢出或留白，响应式下更难维护。真正有效的是控制文字基线位置。
适用场景：图文卡片、产品列表、带标题+描述的浮动模块。
- 测量各块文字底部到容器底的距离差（比如 A 块短 16px，B 块刚好）
- 对内容短的项加
padding-bottom: 16px，把文字“托高”到同一水平线 - 务必配合
box-sizing: border-box，否则 padding 会让总尺寸超标 - 该方法只解决视觉对齐，不替代 BFC 清除——两者要同时做
为什么 vertical-align 对 float 元素无效？
vertical-align 只对 inline、inline-block、table-cell 生效。float 元素生成独立 BFC，既不在行内上下文里，也不参与父容器的 line box 排列，这个属性直接被忽略。
常见错误写法：.item { float: left; vertical-align: middle; } —— 完全没反应。
- 如果真要保留类似效果，得先取消
float，改用display: inline-block+vertical-align: middle - 此时父容器需设
font-size: 0消除 inline-block 间隙，子项再恢复font-size - 但这就已经不是“浮动对齐”，而是用 inline-block 模拟浮动布局了
新项目该用什么替代 float 做等高对齐？
直接用 display: grid 或 display: flex。它们天然规避塌陷、自动等高、语义清晰，代码量反而更少。
Grid 实例（推荐）：.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start; }
Flex 实例：.flex { display: flex; flex-wrap: wrap; align-items: flex-start; }
- Grid 在多行等高对齐上更稳定，尤其适合卡片类布局
- Flex 对单行控制更强，但多行时
align-items作用于整行，不是每个 item 独立等高 - 两者都不需要
clear、clearfix或手动调padding，响应式断点里也不会突然塌陷
最容易被忽略的是：那些在 PC 上正常、缩到平板尺寸后突然错位的浮动布局，往往是因为媒体查询里忘了重置父容器的 BFC 触发方式 —— 不是子项问题，是容器“失联”了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
