浮动元素不换行的本质是父容器未触发bfc且宽度边界不清；修复需display: flow-root或overflow: hidden触发bfc，配合box-sizing: border-box、精确width计算、min-width约束及伪元素清除浮动。
float元素不换行？先看父容器有没有触发BFC
浮动元素本身不会“自动换行”，它只是脱离文档流后贴边排列；真正决定是否折行的，是父容器能否提供明确的宽度边界 + 是否形成块级格式化上下文（BFC）。没触发BFC时，父容器高度塌陷、宽度计算失真，width设了也白设——子元素会横向溢出或挤成一排。
最稳妥的修复方式是给父容器加：display: flow-root（现代首选）或 overflow: hidden（兼容IE8+但可能裁剪阴影/下拉菜单）。避免用float自身触发BFC，容易引发连锁塌陷。
若需IE老版本兼容，可组合：zoom: 1 + overflow: hidden，双保险。
width + box-sizing: border-box 缺一不可
很多人设了width: 50%却发现两列还是放不下，问题常出在盒模型上：默认box-sizing: content-box，padding和border会额外撑宽元素。比如width: 50%; padding: 10px，实际占用远超50%。
必须显式写：box-sizing: border-box，让width包含padding和border。
另外注意小数像素误差：width: 33.333%在缩放时可能四舍五入，建议改用calc(33.333% - 2px)留余量，或直接迁移到flex布局。
-
width要按“可用总宽 − 总间隙”再均分，比如4个元素、每对间margin: 0 10px，则总间隙为3 × 20px，单个元素宽 =(容器宽 − 60px) / 4 - 百分比
width始终相对于父容器的content box，若父容器有padding，子元素100%也不会填满可视区域
min-width 是控制缩放时换行时机的关键
窗口变窄时浮动项突然换行，并非浏览器bug，而是父容器宽度随视口收缩，导致内部浮动项总宽撑破边界。此时min-width就是“底线约束”——它设在父容器上，不是子项上。
值怎么定？得算：所有浮动子项的width（或自然内容宽） + margin + padding + border + 10–20px余量。用开发者工具的“盒模型”面板逐个确认实际占用宽度。
别写min-width: 100vw——这会让容器永远占满视口，失去响应意义。
如果子项含长单词或URL，还得配合word-break: break-all或overflow-wrap: break-word，否则文本不换行，min-width也救不了。
clear: both 不是换行解法，而是结构干扰源
在每行末尾加<div style="clear: both"></div>看似能“强制换行”，实则污染DOM、破坏语义，且新增子元素时极易漏掉clear导致错位。
更干净的做法是用伪元素清除浮动：::after { content: ""; display: table; clear: both; }。但这仍属hack，本质还是在补BFC缺失。
真正该做的，是让换行由尺寸自然触发：BFC + 合理width + box-sizing + 间隙预留。一旦父容器宽度固定、子项宽度可控，浏览器就会在空间不足时自动把下一个浮动元素“推”到下一行起始位置——这才是你想要的“自动换行”。
复杂点在于，浮动项高度不一致时，第二行首项可能卡在第一行短项右侧，形成阶梯状。这不是样式写错了，而是float的固有行为。这种场景下，clear控制反而更难维护，直接换flex-wrap: wrap更省心。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
