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