先查white-space是否为nowrap，再设width/max-width和overflow-wrap:break-word；若父容器为flex/grid则float失效；推荐用display:flow-root或flex替代float。
浮动元素内文字不换行，先查 white-space 是不是被设成了 nowrap
绝大多数“不换行”不是浮动惹的祸，而是你或第三方样式偷偷加了 white-space: nowrap。浮动容器本身对内部换行毫无影响——它只管定位，不管断行。打开 DevTools，选中那个溢出的元素，在「Computed」里搜 white-space，如果值是 nowrap，直接覆盖为 white-space: normal 就能解决。特别注意 Ant Design 的 .ant-tag、某些重置 CSS 或 scoped style 里可能悄悄带进来这个设置。
必须同时设置 width 或 max-width 和 overflow-wrap: break-word
overflow-wrap: break-word（旧名 word-wrap: break-word）单独写无效，因为浏览器需要一个明确的换行边界。浮动元素若没设宽度，它的宽度由内容撑开，等于没给换行留“余地”。
- 给浮动元素加
max-width: 300px（或具体像素/百分比） - 再配
overflow-wrap: break-word - 中文混合英文长串时，可额外加
word-break: break-word兼容老 Safari，但别用word-break: keep-all——它会让中文彻底不折行
示例：
.float-box {
float: left;
max-width: 250px;
overflow-wrap: break-word;
}
父容器用了 flex 或 grid，float 就失效了
如果浮动元素的父容器是 display: flex 或 display: grid，float 属性会被完全忽略。此时元素按主轴排列，根本不会触发浮动流行为，自然也谈不上“换行”。检查父级 computed style，确认是否误用了 Flex/Grid 布局。临时注释掉父容器的 display 或 overflow 属性，看浮动是否“复活”。真要多列+换行，flex-wrap: wrap 比硬扛 float 可靠得多。
安全的随机密码生成器。支持自定义长度、字符类型（大写/小写字母、数字、特殊符号），排除相似字符，批量生成。纯 Python 标准库，无需 API 密钥。
立即学习“前端免费学习笔记（深入）”；
别硬修浮动，优先用 display: flow-root 或 flex 替代
浮动本质是为图文环绕设计的，现代布局中它只会放大宽度计算、清除、塌陷等问题。如果你只是想让几个块并排且内容能正常换行：
-
display: flow-root能创建 BFC，自动包含浮动子项，又不用清浮动 - 更推荐直接改用
display: flex+flex-wrap: wrap，子项用flex: 0 0 auto或固定宽 - 若必须保留外层
float（比如兼容旧代码），可在其内部用display: flex包裹文本，并设overflow: hidden防溢出
浮动不是布局工具，它是排版遗留物。越坚持用它实现响应式多列，越容易卡在宽度算不准、换行不触发、高度塌陷这一连串连锁反应里。
