浮动元素设 width: 100% 会换行，是因为其实际宽度=父容器 content 宽+padding+border+margin，若父容器有 padding 或 border 就必然溢出；width: 100% 仅相对于 content width 计算，非整个盒子宽度。
为什么浮动元素设 width: 100% 就立刻换行
不是它“想换行”，而是浏览器按盒模型算出：这一行已经没空间放第二个块了——width: 100% 的浮动元素，实际占宽 = 父容器 content 宽 + padding + border + margin，只要父容器有哪怕 1px 的 padding 或 border，它就必然溢出。
-
width: 100%是相对于父容器的 content width 计算的，不是整个盒子宽度 - 若父容器设了
padding: 16px，子元素width: 100%实际会撑到parentWidth + 32px（左右 padding），直接突破容器边界 - 浮动元素不参与文档流高度计算，但横向空间争夺是刚性的：它不会“谦让”，只会把兄弟元素挤走或换行
- 开发者工具里看 “Computed” → “Total Width”，别只信
width声明值
float 元素设 width: 100% 的典型错误场景
你写的是“占满”，但浏览器读的是“必须独占一行且不准缩”，结果往往比预期更激进。
- 父容器用了
box-sizing: content-box（默认），而你又加了padding: 10px→ 实际占宽 = 100% + 20px - HTML 源码中两个浮动元素之间有换行符或空格 → 渲染器插入约 4px 文本间隙，
width: 100%项一上来就超限 - 父容器本身是
display: inline-block或flex，其宽度由内容撑开 →width: 100%可能远小于你预期，也可能意外等于 0（比如父容器没内容） - 写了
clear: both在同一个元素上 → 浏览器忽略，不阻止换行，也不修复布局
想让它不换行？别硬扛浮动逻辑
浮动本就不适合“占满整行再停”的语义。width: 100% 在浮动上下文中本质是反模式——它在模拟块级行为，却套在脱离流的元素上。
- 真正需要“单行独占”，优先用
display: flex+flex-wrap: wrap+width: 100%（此时生效） - 若必须用浮动，把
width: 100%换成width: calc(100% - 2px)（留出边框/间隙余量），并确保父容器box-sizing: border-box - 别依赖
overflow: hidden来“防止换行”——它只是触发 BFC 清除浮动，不影响横向空间计算 - 移动端或高缩放比下，亚像素四舍五入会让
width: 100%更不可靠，尤其搭配border或transform
最后注意一个隐蔽陷阱
width: 100% 对浮动元素生效的前提，是它还在文档流的“横向排列上下文”里。一旦父容器设了 display: grid 或 display: flex，float 就被无视，此时 width: 100% 行为由 Grid/Flex 规则接管，和浮动无关了——你看到的“换行”，其实是 Grid 自动换行或 Flex 拉伸失败的结果，不是浮动惹的祸。
立即学习“前端免费学习笔记（深入）”；
