直接用float:left和float:right无法自动对齐，因二者各自向父容器边缘贴合、不协商位置；必须满足同级子元素、共用父容器、父容器触发bfc三个条件，否则易出现高度塌陷、宽度超限或包含块不同导致的错位。
直接用 float: left 和 float: right 无法“自动对齐”——它们只是各自往父容器边缘贴，中间空隙由剩余空间决定，不是你想要的“面对面”布局。必须满足三个硬性条件：同级子元素、共用父容器、父容器触发 BFC 或清除浮动。
为什么两个浮动元素总是一上一下、不并排？
最常见原因是父容器高度塌陷，导致视觉错乱；其次是宽度超限或 HTML 结构不合规。
- 父容器没形成 BFC（比如没设
overflow: hidden或display: flow-root），浮动子元素脱离文档流后，父容器“看不见”它们的高度，后续内容上浮，看起来像右浮元素掉到下一行 - 左右浮动元素的宽度 + margin + padding + border 总和超过父容器宽度（尤其当
box-sizing: content-box时） - 两个浮动元素不在同一父容器内——比如一个在
<header></header>里，另一个在<nav></nav>里，它们参照的“包含块”不同，根本不会产生左右关系 - HTML 中写了换行或空格：
<div class="left"></div>\n<div class="right"></div>会渲染出约 4px 间隙，严重时触发换行
必须设置的父容器样式
只写 float: left 和 float: right 不够，父容器必须主动“收住”浮动。
- 推荐用
display: flow-root：现代浏览器（Chrome 64+/Firefox 59+/Edge 79+）已全面支持，语义清晰，不干扰子元素行为，也不裁剪position: absolute元素 - 次选
overflow: hidden：兼容性更好，但有副作用——可能意外裁剪阴影、下拉菜单或transform溢出部分 - 避免用
float: left给父容器自身：这会让它也脱离文档流，引发连锁错位 - 别依赖
clear: both插在两个浮动元素之间：比如左浮后立刻加clear: left，右浮元素会被挤到下一行——这是高频翻车点
左右浮动元素的宽度与盒模型陷阱
即使都设了 width: 50%，也很容易换行，原因几乎总是盒模型计算偏差。
- 默认
box-sizing: content-box，所以width: 50%+padding: 10px实际占宽 > 50%，左右加起来轻松超 100% - 解决方案：统一加
box-sizing: border-box，让 width 包含 padding 和 border - 留出安全间隙：不要死守
50% + 50%，改用width: 48%或flex-basis: 48%（如果后面切 flex） - 父容器若有
padding-left或padding-right，也会压缩可用宽度，需一并检查
现代项目里还该用 float 做左右对齐吗？
不该。这不是过时问题，而是职责错配：float 的设计目标是文字环绕图片，不是页面结构布局。
- 它带来不可忽视的副作用：高度塌陷必须手动处理、响应式断点难控制、与 flex/grid 混用时行为不可预测
- 真正两端对齐，三行 CSS 就够：
display: flex+justify-content: space-between+align-items: center - 如果维护老项目不得不碰 float，请记住：左右浮动必须同级、同父、同时触发；高度差异大时，仅靠清除浮动不够，还得用伪元素撑高或额外占位
最容易被忽略的是：没确认父容器是否真的“收住了”浮动——::after 清除或 flow-root 不是可选项，是前提。没这一步，后面所有对齐操作都是在错误基础上调试。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
