浮动元素无法同时左右对齐，因其设计初衷是文字环绕而非精确布局；推荐用Flex布局（display: flex; justify-content: space-between）实现两端对齐，简洁稳定。
浮动元素左右对齐无法同时满足，本质是 float 的设计初衷并非用于精确布局，而是让文字环绕图片等场景。当需要左、右两端各放一个元素（比如左侧 logo + 右侧导航），仅靠 float:left 和 float:right 容易出现高度塌陷、换行错位或父容器不包裹等问题。解决思路有两个主流方向：一是修复浮动带来的副作用，二是直接换更现代的布局方式。
用 float + clearfix 控制父容器包裹
问题常出在父容器“看不见”浮动子元素，导致高度为 0，进而影响后续布局。clearfix 是经典解法，它通过伪元素触发 BFC，让父容器正确包含浮动子项。
示例结构：
HTML<div class="header"><br> <div class="logo">LOGO</div><br> <div class="nav">首页｜关于｜联系</div><br></div>
立即学习“前端免费学习笔记（深入）”；
CSS.header {<br> zoom: 1; /* IE6/7 触发 hasLayout */<br>}<br>.header:after {<br> content: "";<br> display: table;<br> clear: both;<br>}<br>.logo { float: left; }<br>.nav { float: right; }
这样就能让 .header 正常撑开，左右元素各就各位。但注意：两个浮动元素不能超出父容器总宽度（含 margin/padding/border），否则右侧元素会掉到下一行。
改用 Flex 布局实现真正两端对齐
Flex 是目前最推荐的方式，语义清晰、控制力强、无塌陷问题。只需三行关键 CSS 即可完成左右对齐：
.header {<br> display: flex;<br> justify-content: space-between;<br> align-items: center; /* 垂直居中（可选） */<br>}
优势明显：
- 无需考虑清除浮动、高度塌陷或 IE 兼容性（现代项目基本可忽略 IE）
-
space-between自动把首尾元素推到容器两端，中间不留空隙 - 子元素默认按文档流顺序排列，无需指定 float 方向
- 支持响应式调整，比如小屏时改成 column 或用
flex-wrap
其他实用补充方案
如果因兼容旧项目必须用浮动，又不想写 clearfix，也可以：
- 给父容器设置
overflow: hidden或overflow: auto（简单粗暴，但可能影响滚动或阴影裁剪） - 在最后加一个空 div：
<div style="clear:both"></div>（不推荐，污染结构） - 用
display: inline-block替代 float，配合text-align: justify+ 伪元素撑满（较绕，少用）
基本上就这些。float 是过时的布局手段，flex 才是当前标准答案。除非维护老系统，否则优先用 flex 实现两端对齐，简洁、稳定、易维护。
