float:left 和 float:right 不能直接对齐，因浮动元素脱离文档流、各自向包含块边界靠齐且不协商位置；必须共用同一父容器并触发bfc，否则参照基准不同。
float:left 和 float:right 为什么不能直接“对齐”？
很多人试过给两个元素分别加 float:left 和 float:right，发现它们没在一行“面对面”对齐，反而一个顶天一个贴底，甚至换行。这不是浏览器 bug，而是浮动的原始设计逻辑：浮动元素会脱离文档流，向指定方向“靠边”，但彼此不协商位置——float:right 的元素会尽可能往包含块右边界贴，而 float:left 往左边界贴，中间空隙由剩余空间决定，不是自动均分或对齐。
必须包裹在同一个父容器里
这是最常被忽略的前提。如果两个浮动元素不在同一层父级内，它们各自参照的“包含块”可能不同（比如一个是 body，一个是某个 div），根本无法形成视觉上的左右关系。
正确做法：
- 用一个共同父容器包裹两个子元素，例如
<div class="row"> <div class="left">...</div> <div class="right">...</div> </div> - 给父容器设置明确宽度（如
width: 100%）或触发 BFC（如overflow: hidden），防止高度塌陷 - 两个子元素分别设
float: left和float: right
示例：
.row {
overflow: hidden; /* 清除浮动并形成BFC */
}
.left { float: left; }
.right { float: right; }
左右浮动元素之间有间隙怎么办？
常见现象：左边元素紧贴容器左边缘，右边元素紧贴右边缘，但中间留出明显空白，尤其当内容短时更明显。原因通常是父容器有默认 padding/margin，或子元素本身有 margin、inline 元素换行产生的空格被渲染为间隙。
排查和解决建议：
- 检查父容器是否有
padding或margin，特别是padding-left/padding-right - 给浮动子元素显式设
margin: 0，避免继承或用户代理样式干扰 - 确保 HTML 中两个浮动元素之间**没有换行符或空格**（即写成
<div class="left">A</div> <div class="right">B</div>而非分行写），否则可能产生 4px 左右间隙 - 若需控制间距，推荐用
margin显式设置，而不是依赖空白字符
现代项目里还该用 float 做左右对齐吗？
可以，但不推荐新项目使用。float 的本职是文字环绕（如图片左浮、文字绕排），强行用于布局已属 hack。它带来一堆副作用：父容器高度塌陷、响应式难控制、IE6/7 兼容包袱重、与 flex/grid 混用易冲突。
替代方案更直接：
- 用
display: flex+justify-content: space-between（最简洁） - 用
display: grid+grid-template-columns: 1fr auto（适合固定右侧宽度场景） - 纯 CSS 的
position: absolute（仅限简单、非流式需求）
如果你正在维护老系统、需要兼容 IE8、或嵌入富文本编辑器生成的 HTML（常含 float），那理解 float 对齐机制仍是刚需——但得清楚：它不是布局工具，是逃逸文档流的临时手段。
真正容易被忽略的是：浮动元素一旦脱离文档流，后续非浮动兄弟元素会“看不见”它，导致布局错位。所以每次用 float，都得同步考虑清除浮动或创建 BFC，这点比对齐本身更关键。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
