浮动元素不换行的根本原因是“没地方换”，即当前行剩余空间不足或父容器布局模型（如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%，两列就塞不下。
立即学习“前端免费学习笔记（深入）”；
- 打开开发者工具，选中浮动元素，看 computed 标签下
width和border-box width是否超出预期 - 统一加
box-sizing: border-box，避免 padding/border 溢出 - 浮动元素之间留空隙？别靠
margin-right撑开，试试用margin-left给第二个元素设左距，更可控
真正想换行，别硬扛 float
如果目标就是“多列后自动折行”，float 本就不是现代解法。它设计初衷是文字环绕图片，不是做栅格布局。
- 用
display: inline-block+vertical-align: top，配合父容器font-size: 0消除间隙 - 用
display: flex+flex-wrap: wrap，子项设flex: 0 0 50%控制列数 - 用
display: grid，直接写grid-template-columns: repeat(auto-fit, minmax(200px, 1fr))
float 换行问题背后，往往是布局模型选错了。越坚持用 float 实现响应式多列，越容易掉进宽度计算、清除浮动、父容器塌陷这一连串坑里。
