左右浮动混用会导致错位、换行异常和父容器塌陷，因浮动脱离文档流且浏览器不协调左右位置；推荐统一用 float: left 配合宽度控制与 overflow: hidden 清除浮动，或直接使用 Flex/Grid 布局。
左右浮动元素错位的典型表现
当你给多个 div 分别设置 float: left 和 float: right，它们在父容器中没按预期对齐、换行异常、父容器高度塌陷、后续内容上浮——这基本不是“布局没写好”，而是浮动脱离文档流后，浏览器渲染顺序和清除逻辑没处理到位。
为什么不能混用 left 和 right 浮动
浮动元素会尽可能靠近其方向的容器边缘，但浏览器不保证左右浮动元素“自动配对”或“同一行内协调”。尤其当宽度不足、内容高度不一致、或存在 margin/padding 差异时，float: right 元素可能被挤到下一行，而 float: left 元素还卡在上一行，造成视觉错位。
-
float: left从左往右依次排列，遇到边界或已浮动元素就换行 -
float: right从右往左依次排列，但它的“起始位置”取决于当前行剩余空间，不受左侧浮动元素位置直接约束 - 左右混用时，父容器无法自动计算出合理高度，
height: auto下极易塌陷
统一用 left 浮动 + 清除浮动（推荐方案）
把所有需要并排的子元素都设为 float: left，再用 clear: both 控制换行点。这样渲染顺序可控，且能配合 overflow: hidden 或伪元素清除父容器塌陷。
.container {
overflow: hidden; /* 触发 BFC，自动包含浮动子元素 */
}
.item-left {
float: left;
width: 60%;
}
.item-right {
float: left;
width: 40%;
}关键点：
立即学习“前端免费学习笔记（深入）”；
- 不用
float: right，改用宽度控制位置（如右侧栏设width: 40%，靠右对齐可用text-align: right或margin-left: auto配合display: inline-block） - 父容器加
overflow: hidden是最轻量的清除方式，兼容 IE8+ - 若需支持老 IE6/7，用
::after伪元素清除更稳妥
清除浮动不生效？检查这几个地方
常见“加了 clear: both 还是错位”，往往是因为清除元素没放在正确位置，或被其他样式干扰。
- 清除元素必须放在所有浮动元素的后面，且是块级元素（如
） - 如果清除元素本身也被浮动了（比如也写了
float: left），clear就失效 - 父容器设置了
height或min-height，会覆盖 BFC 自动撑高行为 - 使用 Flex/Grid 布局时，
float会被忽略——确认你没在现代布局里“回退”用浮动
错位问题看似是样式没对齐，本质是浮动机制和文档流理解偏差。只要记住：浮动是“借道超车”，不是“并线行驶”；想稳定并排，要么全用 float: left + 宽度控制，要么直接换 display: flex。
