17370845950

左右浮动混用会导致错位、换行异常和父容器塌陷，因浮动脱离文档流且浏览器不协调左右位置；推荐统一用 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。