浮动元素不换行的根本原因是父容器未触发BFC导致宽度计算失真；解决需设display: flow-root或overflow: hidden，配合box-sizing: border-box及calc()精确宽度，小屏下必须重置float: none而非仅clear: both。
浮动元素不换行？先看父容器有没有触发BFC
浮动元素本身不会“自动换行”，它只是脱离文档流后贴边排列；真正决定是否折行的，是父容器能否提供明确宽度边界 + 是否形成块级格式化上下文（BFC）。没触发BFC时，父容器高度塌陷、width计算失真，子元素会横向溢出或挤成一排。
最稳妥的做法是给父容器加 display: flow-root（现代首选）或 overflow: hidden（兼容IE8+但可能裁剪 position: absolute 子元素）。避免用 float 自身触发BFC，容易引发连锁塌陷。
-
display: flow-root兼容 Chrome 58+ / Firefox 55+ / Edge 79+，Safari 10.1+ 支持；iOS Safari 10.3+ 可用 - 若需IE老版本兼容，可组合
zoom: 1+overflow: hidden - 别依赖
float父容器——它不解决自身塌陷，反而让问题更隐蔽
float元素宽度怎么设才真能换行
很多人设了 width: 50% 却发现两列还是放不下，问题常出在盒模型和间隙计算上。百分比宽度始终相对于父容器的 content box，padding 和 margin 都会额外撑开空间。
- 必须显式写
box-sizing: border-box，让width包含padding和border - 若子项间有
margin: 0 10px，4个元素就有 3 × 20px = 60px 总间隙，单个元素宽应为calc((100% - 60px) / 4) - 小数像素误差常见：
width: 33.333%在缩放时可能四舍五入，建议留余量，如calc(33.333% - 2px) - 长单词或URL需配合
overflow-wrap: break-word，否则文本不折行，min-width也救不了
媒体查询里取消浮动，只写 clear: both 是无效的
clear: both 是“避让指令”，不是“归位指令”。它只让当前元素避开前面浮动，但不会让已脱离文档流的浮动元素重新回归布局流。小屏下错位、溢出、父容器背景不显示，根源仍是 float: left 还在生效。
- 必须显式写
float: none，且同步配齐三要素：width: 100%、margin: 0（或针对性重置） - 浮动嵌套时，
@media规则要落在每一层浮动容器上，不能只写外层选择器 - 若父容器用了
display: flow-root，小屏下只需改子项float: none即可，无需额外clear
还在用 clear: both 空元素？该换思路了
插入 <div style="clear:both"></div> 看似能“强制换行”，实则污染DOM、破坏语义，且新增子元素时极易漏掉导致错位。它只影响自身及后续兄弟元素位置，不解决父容器高度塌陷。
- 若需精确控制某两组浮动之间断行（比如第3个卡片后），可临时用，但推荐加
aria-hidden="true"抑制屏幕阅读器误读 - 大量循环渲染时，务必显式重置空元素样式：
height: 0; font-size: 0; line-height: 0;，否则margin/padding会引入不可预期空白 - 真正想解决“浮动导致父容器塌陷 + 后续内容错位”，直接用
display: flow-root更可靠；想控制某段文字避开浮动，才单独给那块加clear: both
浮动布局本身已是过时模式，现在遇到“必须换行”的需求，大概率说明结构设计可以更合理——比如用 flex-wrap: wrap 控制换行点，或用 grid-template-columns 定义显式轨道，比塞空元素干净得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
