float:left与float:right元素“相撞”本质是总宽度（含padding、border、margin）超出父容器可用空间，导致左右浮动边界在中间相遇或交叉，并非层叠或z-index问题；需检查computed width、预留容错、避免负向margin，现代推荐用flex或grid替代。
float: left 和 float: right 元素为什么会“相撞”？
它们根本没在“层叠”，而是被强行塞进同一行、但总宽度超出了父容器可用空间。浏览器按浮动规则把 float: left 往左推、float: right 往右推，一旦左右边界在中间相遇甚至交叉，就会视觉上挤在一起——尤其当两者都设置了 width 但没留余量时。
这不是 z-index 或渲染顺序问题，是盒模型计算溢出的直接结果。打开开发者工具看 computed width，常会发现：两个元素的 width + padding + border + margin 之和 > 父容器 width（含滚动条或 box-sizing 影响）。
怎么快速验证是不是宽度撑爆了？
临时加几行调试样式，比改逻辑更快定位：
- 给父容器加
outline: 1px solid red（不用border，避免触发 box-sizing 变化） - 给每个浮动子元素加
outline: 1px dashed blue，看真实浮动边界是否越界 - 用开发者工具逐个检查每个元素的
Computed → width，注意是否含box-sizing: border-box的影响 - 删掉所有
margin和padding，只留float和width，看是否还重叠——如果消失了，就是外边距/内边距吃掉了空间
clear: both 加在哪才管用？
clear: both 对 float: left 和 float: right 同时存在的场景基本无效——它只让当前元素“下移一行”，但左右浮动本身还在原位，下一行照样可能再撞上。
真正该做的是控制它们的共存条件：
- 确保两者总宽度 ≤ 父容器可用宽度（建议预留至少
2px容错） - 避免对其中任一元素设
margin-left（对float: left）或margin-right（对float: right），这类负向偏移极易引发错位 - 若必须留空隙，统一用
margin加在非浮动方向：比如float: left元素加margin-right，float: right元素加margin-left - 不要依赖 HTML 换行或空格生成间隙；需要时显式写
font-size: 0清除 inline 间隙（仅当父容器是 inline-level 时）
更靠谱的替代方案有哪些？
浮动本就不适合左右并置布局，现代方案能彻底避开“相撞”逻辑：
- 用
display: flex替代：父容器设display: flex; justify-content: space-between，子元素去掉float即可自动分置两端 - 用
display: grid：grid-template-columns: 1fr auto或显式定位，完全脱离浮动语义 - 仍需兼容旧环境？优先选
display: flow-root（而非overflow: hidden），它能包裹浮动但不裁剪下拉菜单、tooltip 等溢出内容 - 如果必须保留 float，就别让
left和right在同一父容器里共存——拆成两个独立容器，各自清除，反而更可控
浮动相撞的本质是人为制造了不可预测的边界竞争，而不是样式没写够。越想用负 margin 或 clear 强行“调齐”，越容易触发 Safari 行高塌陷或 IE 下的 hasLayout 错乱。直接换布局模型，省下的调试时间够重写三遍 clearfix。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
