浮动左右对齐失败主因是父容器未清除浮动致高度塌陷，或宽度超限（含padding/border）；应设box-sizing:border-box、用BFC（如display:flow-root）收浮，现代布局优先选flex或grid。
float left 和 float right 为什么会错位
浮动元素左右对齐失败，最常见原因是父容器没清除浮动，导致高度塌陷，后续元素上浮干扰布局；另一个是左右浮动元素的宽度加起来超过父容器（比如都设了 width: 50%，但还有 margin、border 或 box-sizing: content-box 的影响）。
- 浮动元素脱离文档流，父容器无法自动包裹它们，视觉上就“看不见”子元素高度
-
float: left和float: right是独立触发的，不会自动配对或对齐基准线，上下位置取决于它们在 HTML 中的先后顺序和原始文档流位置 - 如果左浮元素先写、右浮元素后写，且两者高度不同，右浮元素顶部会和左浮元素顶部对齐；但若右浮元素先写，它可能顶到父容器顶部，左浮元素则从它下方开始找空间
必须加 clear 或触发 BFC 来收住浮动
不处理父容器塌陷，左右浮动看起来就“飘”在页面上，甚至压住下面的内容。两种可靠做法：
- 在父容器末尾加一个清除浮动的空元素：
<div style="clear: both"></div> - 更推荐：让父容器自身形成 BFC，例如设置
overflow: hidden、display: flow-root（现代浏览器支持好，语义也更清晰）或float: left（不推荐，会把父容器也拉进浮动流）
注意：display: flow-root 是目前最干净的方案，它既创建 BFC 又不改变容器行为，兼容性已覆盖 Chrome 64+/Firefox 59+/Edge 79+。
左右浮动对齐时的宽度与盒模型陷阱
即使写了 width: 50%，也可能因为默认 box-sizing: content-box 导致总宽超 100%。加上 padding 或 border 后，内容区被压缩，但外层尺寸仍按 width + padding + border 计算。
立即学习“前端免费学习笔记（深入）”；
- 务必统一设
box-sizing: border-box，否则左右浮动块的实际宽度不可控 - 避免使用
margin做左右间隔——浮动元素的 margin 不会触发“兄弟间距合并”，但容易因父容器宽度不足导致换行；改用padding在父容器里留白，或用calc(50% - 8px)配合margin - 若需中间留空，不要给两个浮动元素都设
width: 45%，而应控制总和 ≤100%，并确保父容器无padding-left/right干扰
为什么现在更建议放弃 float 做左右对齐
float 本意是文字环绕图片，不是为页面布局设计的。它的行为依赖文档流顺序、易受高度差异影响、清除逻辑绕弯，且响应式适配困难。
- 替代方案优先选
display: flex（父容器设display: flex; justify-content: space-between），简洁可控 - 次选
display: grid（如grid-template-columns: 1fr 1fr），天然支持对齐、间距、响应式 - 如果必须用 float（比如维护老项目），记住：左右浮动必须同级、同父、同触发时机；高度差大时，得靠
min-height或伪元素撑开父容器
真正难的不是写对 float: left 和 float: right，而是预测它们在各种内容长度、字体大小、缩放比例下的实际表现——这点连经验丰富的开发者也常踩坑。
