浮动元素不换行的根本原因是“没地方换”，即当前行剩余空间不足或父容器布局模型（如flex/grid）使float失效，而非CSS书写错误。
浮动元素为什么死活不换行
浮动元素不换行，根本原因不是 CSS 写错了，而是它“没地方换”——float 本身不会强制换行，它只会在当前行剩余空间足够时贴边排列；一旦宽度超限或父容器有约束（比如 overflow: hidden、display: flex 或设置了固定宽高），它就会被强行压在同一行挤变形，甚至溢出不可见。
检查父容器的 display 和 overflow 设置
常见陷阱是父容器用了 display: flex 或 display: grid，此时 float 完全失效——Flex/Grid 布局下浮动会被忽略，元素按主轴排列，根本不会触发浮动流行为。
另外，父容器若设了 overflow: hidden、auto 或 scroll，虽能触发 BFC 清除浮动，但也可能把溢出的浮动元素直接裁掉，看起来像“卡住不换行”。
- 用
display: block或display: inline-block替代 Flex/Grid 父容器再试浮动 - 临时注释掉父容器的
overflow属性，看浮动元素是否突然“弹出来” - 检查父容器是否有
width设得太小，或被其他规则（如max-width）锁死
浮动元素自身宽度 + margin/border/padding 超出可用空间
浏览器计算浮动是否换行，依据的是「元素总宽度」：即 width + padding + border + margin。哪怕你写了 width: 50%，加上 padding: 10px 和 border: 1px，实际占宽就远超 50%，两列就塞不下。
