触发bfc是解决float子元素不换行的关键，需配合box-sizing:border-box和合理width控制；现代推荐display:flow-root，老项目可用overflow:hidden或伪元素清浮动。
float 后子元素不换行？先看容器有没有触发 BFC
浮动元素脱离文档流，父容器高度塌陷，子元素自然“看不见”换行边界。真正起作用的不是 float 本身，而是容器是否形成块级格式化上下文（BFC）。没有 BFC，width 设再小，子元素也会横向溢出或挤成一排。
- 常见错误现象：
float: left的多个div堆在一行，即使父容器width只有 300px - 最直接的修复：给父容器加
overflow: hidden、display: flow-root或float自身（但慎用） -
display: flow-root是现代首选——它创建 BFC 且不带副作用（不像overflow: hidden可能裁剪阴影或下拉菜单） - IE8+ 兼容需回退：
zoom: 1（仅 IE） +overflow: hidden（双保险）
控制换行的关键其实是 width + box-sizing
很多人设了 width 却发现子元素还是不换行，问题常出在盒模型计算上。浮动元素默认是 content-box，padding 和 border 会撑大实际占用宽度，导致“以为够放两个，其实只能塞一个”。
- 必须显式写
box-sizing: border-box，否则width: 50%+padding: 10px实际宽 > 50% - 子元素
width要留余量：比如两列布局，别写死width: 50%，改用width: calc(50% - 2px)防止因四舍五入多占 1px 溢出 - 避免用
float做响应式布局——媒体查询里改width很容易因小数像素错位
clear: both 不是万能解，小心破坏流式结构
有人在每行末尾加一个 clear: both 的空 div 强制换行，这确实能“看起来”换行，但代价是 DOM 膨胀、语义混乱，且后续新增子元素时极易漏掉 clear 导致错位。
- 错误用法：
<div class="item"></div> <div class="item"></div> <div style="clear:both"></div> - 正确思路：用容器 BFC + 子元素
width控制数量，让换行由尺寸自然触发 - 如果真要手动清浮动，优先用伪元素：
::after { content: ""; display: table; clear: both; }，比空标签干净
float 已过时，但 legacy 项目绕不开——注意 flex 替代路径
新项目别碰 float 布局，但维护老代码时，你可能得在不改 HTML 结构的前提下修换行问题。这时候重点不是“怎么让 float 换行”，而是“怎么最小改动让它不崩”。
- 检查是否误用了
white-space: nowrap或display: inline-block配合float，这两者叠加会让换行逻辑失效 - 如果父容器已有
float，子元素再float就容易连锁塌陷，此时加display: block和明确width比调clear更稳 - 替换为
display: flex时，flex-wrap: wrap+flex-basis才是等效替代，不是简单删掉float就完事
浮动换行的本质，是尺寸约束 + 流式容器边界的共同作用。没触发 BFC 的容器，再细的 width 计算也白搭；而一旦 BFC 立住，剩下的只是像素级微调。老项目里最常被忽略的，是 box-sizing 缺失和 clear 的滥用，而不是 float 本身。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
