父容器高度塌陷导致对齐失效，是因为浮动元素脱离文档流，父容器无法感知其高度；首选display: flow-root触发BFC解决，次选伪元素clearfix，现代布局应优先使用Flex或Grid替代float。
浮动元素在父容器中“看起来没对齐”，90%不是对齐属性写错了，而是父容器根本没包裹住它们——高度塌陷是第一道坎，视觉错位是第二道坎。
为什么父容器高度塌陷导致对齐失效
float 元素一设，就脱离文档流。父容器计算高度时直接忽略它们，height: auto 可能算出 0px。背景色消失、边框不显示、下方内容上浮盖住浮动块，都是这个原因的表象。
- DevTools 里看父容器 computed height 是 0 或远小于子项实际高度，基本可确认塌陷
-
overflow: hidden能触发 BFC，但可能意外裁剪box-shadow或position: absolute子元素 - 最干净的解法是
display: flow-root：现代浏览器全支持（Chrome 64+ / Firefox 59+ / Edge 79+），不改变父容器行为，也不带副作用 - 老项目若需兼容 IE，可用伪元素清除：
.parent::after { content: ""; display: table; clear: both; }
左右浮动并排却换行或错位
写了 float: left 和 float: right 却没贴边？大概率是宽度超限或盒模型没管好。
- 默认
box-sizing: content-box，width: 50%+padding: 10px就会超 100%，必须加box-sizing: border-box - 父容器若有
padding-right或border-right，也会挤占可用空间 - 两个浮动元素必须写在**同一父容器内**，且 HTML 中不能有换行符或空格干扰（即写成
<div></div> <div></div>，不要换行） - 顺序影响垂直对齐：先写的
float: right会顶到右上角；后写的会尝试与前面浮动元素同行——但前提是总宽 ≤ 父容器宽度
vertical-align 对 float 元素完全无效
vertical-align: middle 加在浮动元素上毫无反应，这不是你写错了，是它本来就不支持。
-
vertical-align只对inline、inline-block、table-cell生效；float 元素生成独立 BFC，不在行内上下文里 - 想让文字视觉居中，可用
line-height匹配容器高度（仅限单行） - 更稳妥的是把父容器设为
display: table-cell; vertical-align: middle，再让子元素浮动——但这只是绕过限制，不是真正控制 float 的垂直位置 - 真要垂直对齐，别硬刚 float：用
display: flex配align-items: center，一行代码解决
现代布局该用什么替代 float 做对齐
float 是为图文环绕设计的，不是为页面布局。它依赖文档流顺序、高度差异敏感、清除逻辑绕弯，响应式下维护成本高。
- 左右并排 →
display: flex+justify-content: space-between - 等高卡片列表 →
display: grid+grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); align-items: start - 单个元素右对齐 → Flex 容器内用
margin-left: auto，Grid 容器内用justify-self: end - 如果必须兼容老项目，记住：float 清除和盒模型控制（
box-sizing: border-box）必须同时做，缺一不可
真正难的不是怎么写对齐，而是判断什么时候该放弃 float——一旦开始反复调 clear、overflow、line-height，就是该切到 Flex 或 Grid 的信号。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
