浮动元素设 width: 100% 按父容器 content 宽度计算，但因忽略父 padding/border 及自身盒模型开销易溢出，且父高度塌陷时失效；推荐改用 flex/grid 布局。
浮动元素设 width: 100% 会按父容器 content 宽度计算，但极易溢出
它确实会尝试占满父容器的「内容区宽度」，但这个“100%”不包含父容器的 padding 和 border，也不包含自身可能带的 padding、border 或 margin。结果就是：视觉上冲出边界，横向滚动条悄无声息地出现。
常见错误现象：float: left 的导航项或卡片在小屏下突然横向溢出，开发者工具里看每个子项宽度加起来明明是 100%，却还是有滚动条。
- 父容器若设了
padding: 16px，它的 content 宽度就比总宽少 32px；子元素width: 100%只能拿到这个缩水后的值 - 子元素自己再加
padding: 8px和border: 1px，实际占宽 = content 宽 + 16px + 2px → 必然超 - HTML 中换行/空格产生的文本节点，也可能在浮动布局中被渲染为不可见间隙，进一步推宽
为什么 box-sizing: border-box 不能单独解决问题
它只管住子元素自身的盒模型（把 padding 和 border 吸进 width 里），但对父容器的 padding 和 border 毫无影响——而浮动元素的 100% 是参照父容器 content 区算的。
实操建议：
- 全局加
* { box-sizing: border-box; }是必须的，但只是基础项 - 如果父容器必须留白，别用
padding，改用margin（不影响子元素 width 计算）或嵌套一层内层容器 - 临时调试时给父容器加
outline: 1px solid red，一眼看出子元素是否真“凸出来” - 检查 computed 样式里的
box-sizing值，框架或重置样式可能覆盖你的声明
float 元素设 width: 100% 时，父容器高度塌陷会让它失效
浮动元素脱离文档流，父容器高度坍缩为 0；此时子元素的 width: 100% 实际是按 0 计算的——虽然浏览器通常会 fallback 到视口宽度，但行为不可靠，尤其在 flex/grid 父容器里更易出错。
必须同步解决高度包裹问题：
- 推荐用
display: flow-root（现代、无裁剪副作用），不是overflow: hidden - 老项目可用
overflow: auto或 clearfix 类，但要注意overflow: hidden会意外裁剪子元素 - 避免混用
float和display: inline-block，尺寸逻辑会互相干扰
替代方案：什么时候该放弃 float + width: 100%
当你要做响应式网格、图文混排或需要稳定百分比宽度时，float 已是过时选择。它对宽度的参照逻辑太脆弱，尤其在嵌套、缩放、多端适配场景下。
更稳的做法：
- 用
display: flex替代，子项默认撑满，flex: 1或width: 100%都可靠 - 用
display: grid，直接定义列轨道，grid-template-columns: 1fr比任何 float 更直观 - 若必须保留浮动（如旧项目维护），优先让子元素不设
width，依赖其天然的「内容包裹」行为；真要控宽，用width: fit-content+min-width: min-content
最常被忽略的一点：浮动元素的 width: 100% 是否真有必要？很多时候，你真正需要的只是“填满可用空间”，而不是“强制拉伸到父 content 宽”。后者在现代布局中几乎总是有更干净的解法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
