float:left 和 float:right 不会自动“面对面”对齐，因为浮动元素各自向包含块边缘靠齐、不协商对齐，且需同级、同父容器并触发bfc（如display:flow-root）才能稳定布局。
为什么 float:left 和 float:right 不会自动“面对面”对齐
这不是 bug，是浮动机制本身决定的：两个浮动元素各自向包含块的左/右边缘靠齐，中间空隙由剩余宽度决定，它们不协商、不配对、不共享对齐基准线。如果父容器没包裹住它们，或没触发 BFC，就根本不是“同一行”的视觉关系。
常见错误现象：float:left 的元素顶在左边，float:right 的元素却卡在下一行最右边，甚至压住下方内容——这基本等于父容器高度塌陷了。
- 必须确保两个浮动元素是**同级子元素**，且包裹在**同一个父容器**内
- 父容器必须显式触发 BFC（如
overflow: hidden或display: flow-root），否则高度塌陷，视觉上就“飘”着 - 不要依赖文档流顺序来控制上下位置：先写的
float:left元素会锚定顶部，后写的float:right会与它顶部对齐；但如果float:right元素 HTML 在前，它可能直接顶到父容器顶部，把 left 元素挤到下面
父容器怎么设置才能稳住左右浮动
关键不是给子元素加样式，而是让父容器“看见”它们的高度，并提供统一参照系。
- 首选
display: flow-root：语义清晰、无副作用、现代浏览器全覆盖（Chrome 64+/Firefox 59+/Edge 79+），写法简洁：.container { display: flow-root; } - 备选
overflow: hidden：兼容性更好，但有潜在副作用（比如遮挡溢出内容、影响滚动行为） - 避免用
float: left或clear: both清除：前者会让父容器也脱离文档流，后者需额外 DOM 节点，绕弯且难维护 - 父容器宽度必须明确（如
width: 100%或设为 block 级默认宽度），否则浮动可能因计算偏差换行
左右浮动元素的宽度和盒模型陷阱
即使写了 width: 50%，也很容易超限换行——因为默认 box-sizing: content-box 下，padding 和 border 会额外增加尺寸。
- 务必加
box-sizing: border-box到浮动子元素上，否则width: 50%+padding: 10px实际占宽 > 50% - 若需中间留白，别给两边都加
margin，改用calc(50% - 8px)控制单侧宽度，或用父容器padding留空 - 检查父容器是否有
padding-left/padding-right，它们会压缩可用宽度，导致右侧浮动元素掉行 - 高度不一致时，
float:right元素顶部仍会与float:left元素顶部对齐；想底部对齐？浮动做不到，得换布局方式
为什么现在更建议放弃 float 做左右对齐
浮动本不是为布局设计的，它的行为严重依赖 HTML 顺序、易受高度差异干扰、清除逻辑脆弱、响应式适配成本高。
- 真正可控的替代方案：
display: flex配合justify-content: space-between，一行代码解决对齐、间距、换行逻辑 - 栅格需求强的场景用
display: grid，例如grid-template-columns: 1fr auto可天然实现“左侧自适应、右侧固定宽” - 如果必须兼容老项目，记住：浮动左右对齐不是“写上就对”，而是一整套约束条件——同父、BFC、盒模型、宽度总和 ≤100%、无干扰 padding/margin，缺一不可
最容易被忽略的是：浮动元素之间没有垂直对齐能力，vertical-align 完全无效；哪怕调好水平位置，上下错位问题依然存在，这时候再补 line-height 或改 inline-block 就已偏离初衷了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
