float元素不会因超出父容器而自动换行，因其脱离文档流且换行取决于剩余空间是否足够；需用clear控制“换行”，现代布局应优先使用flex-wrap或grid。
float 元素超出父容器后为什么不停止换行
因为 float 本身不触发块级换行逻辑，它只是把元素“抽离文档流”并靠边，后续内容会环绕它——但浮动元素自己不会因为宽度超限就自动折行或收缩。
常见错误现象：float: left 的 div 设了固定宽（比如 width: 200px），但父容器只有 150px，结果该元素直接溢出到右侧甚至遮挡其他内容，而不是“换到下一行”。
- 浮动元素的换行不是由父容器宽度决定的，而是由「剩余可用水平空间」是否足够容纳它触发的
- 如果父容器有明确宽度，且子元素
float后总宽度 > 父宽，浏览器不会帮你折行，只会让最后一个浮动元素“掉下去”——但这不是换行，是因空间不足被挤到下一行浮动起始位置 - 这个“掉下去”的行为依赖于前一个浮动元素是否还留有水平空间；如果前面全是
float: left且没清浮，新元素可能卡在奇怪位置
clear 属性才是控制“换行”的实际开关
clear 不是清除浮动本身，而是告诉浏览器：“我这个元素，不允许上边有任何浮动元素”，从而强制它从下一行开始渲染——这才是你想要的“换行”效果。
使用场景：多个 float: left 的卡片排成一行，最后一张要另起一行时，不能只靠改宽度，得加 clear: left（或 both）。
立即学习“前端免费学习笔记（深入）”；
-
clear: left表示该元素上边不能有左浮动元素，会跳过所有已浮动的左元素，找一个干净的水平起点 - 如果父容器没有设置
height或overflow，浮动子元素会导致父容器高度塌陷，此时clear元素可能出现在父容器外部 - 别用
clear: both去“清理浮动”——那是 hack 旧法；现代应该用display: flow-root或伪元素::after清除
float 宽度计算受 box-sizing 和 border 影响极大
很多“明明设了 50% 却放不下两个”的问题，根源不在 float，而在盒模型——border、padding 默认会撑大元素总宽，导致两列实际总宽 > 100%。
错误示例：width: 50%; float: left; padding: 10px; → 实际占宽 > 50%，两列必然溢出。
- 必须统一设
box-sizing: border-box，否则width只控制 content 区域，不包含 padding/border - 百分比宽度是相对于父容器 content box 计算的，如果父容器有
padding，子元素 100% 宽也不会填满整个父容器可视区域 - 小数像素（如
width: 33.333%）在某些浏览器缩放下会四舍五入，造成累计误差，建议用flex或grid替代
现代布局中 float 已不适合做多列换行控制
用 float 实现响应式多列换行，本质是在对抗 CSS 天然流式逻辑，调试成本高、容错差、移动端适配困难。
真正需要“宽度超限就换行”的场景（比如标签云、响应式卡片列表），flex-wrap: wrap 或 display: grid 才是语义正确且稳定的选择。
-
float没有“换行阈值”概念，而flex的flex-basis+flex-wrap能精准控制何时折行 - IE10+ 支持
flex-wrap，兼容性已远超float布局所需的 hack 成本 - 如果必须支持 IE9 及更早版本，那不是靠调
float参数能解决的，得接受布局降级或引入 JS 补丁
浮动布局的换行不是宽度驱动的，是空间和 clear 共同作用的结果；而人眼看到的“换行”，往往掩盖了父容器塌陷、盒模型溢出、或清浮失效这些底层断裂点。
