浮动元素设width仍换行，根本原因是实际占用宽度（内容宽+padding+border+margin）超出父容器；常见诱因包括box-sizing: content-box、html空格间隙、百分比精度误差及clear:both误用位置。
float元素设了width还是换行，根本不是width没生效
浮动元素设了width: 33.33%却换行，大概率不是浏览器“不认width”，而是实际占宽远超这个值。浮动本身不提供容错，它只机械地按盒模型计算：内容宽 + padding + border + margin，只要总和突破父容器可用宽度，立刻换行。
- 用开发者工具看“Computed”里的
Total Width，不是只看声明的width - 默认
box-sizing: content-box，width: 200px+padding: 10px+border: 1px= 实际占宽222px - HTML源码中浮动元素之间有换行或空格，渲染器会插入约
4px间隙，三列就多出8px - 百分比宽度在小数精度下累积误差，
33.33% × 3 = 99.99%，但加上边距后轻松破百
clear: both加在浮动元素自己身上完全无效
clear: both不是“让这个浮动元素别换行”，而是“让当前元素避开上方所有浮动兄弟”。给浮动元素自己加clear: left，等于让它避开自己——逻辑上不成立，浏览器直接忽略。
- 正确清除位置：必须是最后一个浮动元素之后、且处于文档流中的第一个块级元素
- 常见误操作：
<div class="float-item"></div> <div style="clear:both"></div>——如果中间隔着position: absolute或display: flex容器，clear就找不到参照物 - 更稳写法：
.parent::after { content: ""; display: table; clear: both; }，或直接给父容器设display: flow-root
overflow-wrap: break-word单独用没用，必须配width
浮动块内长文本（如URL、无空格字符串）溢出，不是float的问题，是换行机制缺少边界。只写overflow-wrap: break-word，浏览器不知道“在哪换”，因为浮动元素若没显式width或max-width，它的宽度由内容撑开，等于没给换行划线。
- 必须同时设置
max-width: 300px（或具体像素/百分比）+overflow-wrap: break-word - 中文场景可加
word-break: break-word，但会破坏正常断词，比如“中华人民共和国”可能被截成“中华人/民共和国” -
white-space: nowrap会彻底禁用换行，哪怕容器窄到只剩1px——慎用
现代项目里还用float做多列布局，本质上是在修旧坑
浮动本为图文混排设计，不是响应式网格方案。你花一小时调calc(33.333% - 10px)、查box-sizing、清浮动、防缩放换行，不如直接切到display: flex：
-
flex-wrap: wrap天然支持自动换行，换行点由flex-basis或min-width控制，不依赖手动算总宽 -
gap替代margin，避免左右边距叠加，也不用操心HTML空格 - 父容器塌陷？不存在的，flex容器自动包含子项高度
真要兼容老环境，display: inline-block也比float干净得多——它不脱标，不需清除，换行行为更可预期。那些还在用float硬扛响应式的代码，往往卡在“以为问题出在clear，其实错在box-sizing”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
