父容器宽度计算异常源于box-sizing未设为border-box、html空格、bfc缺失及响应式断点未同步重置四者叠加，导致width: 100%撑破视口、浮动间隙、高度塌陷及错位。
浮动后父级宽度计算异常，不是父容器“变宽”了，而是它根本没正确算出子元素该占多大——width、padding、border、HTML空格、BFC缺失，四者叠加导致浏览器把宽度算错甚至触发横向滚动条。
为什么父容器的width: 100%会撑破视口？
常见错误是给父容器设了padding或border，但没统一box-sizing。比如父容器padding: 16px + 子项width: 100%，实际占用就是100% + 32px。开发者工具里看scrollWidth明显大于clientWidth，基本可锁定是盒模型溢出。
- 必须全局加
* { box-sizing: border-box; }，且这条规则要放在所有 CSS 最顶部，否则被 normalize.css 或组件库覆盖就失效 - 别只写
html, body { box-sizing: border-box; }——它不继承，子元素仍按默认content-box算 - 如果用了 Ant Design、Element Plus 等 UI 库，查它们是否悄悄重置了
box-sizing，得用更具体选择器覆盖，例如.ant-input, .el-button { box-sizing: border-box !important; }
浮动子项之间凭空多出 4px 间隙怎么消灭？
那不是 margin，是 HTML 换行符被渲染成空格字符，在font-size: 16px下约占 4px 宽度。多个浮动<div>写成换行格式：<code><div></div>\n<div></div>，就会中招。
- 最稳方案：父容器设
font-size: 0，所有浮动子项显式重设font-size（如font-size: 14px），漏一个文字就消失 - 压缩 HTML 不现实？那就别碰
line-height或vertical-align——对float: left的块级元素，这两个属性根本不起作用 - 富文本容器慎用
font-size: 0，编辑器插入的<p></p>可能继承后失真；此时优先换display: flex，它天然忽略空白字符
父容器高度塌陷为何会间接导致宽度错乱？
浮动元素脱离文档流，父容器高度算成0px，后续元素上顶，连带让百分比宽度失去计算基准——width: 50%按0px算，结果还是0px，布局全崩。
- 优先用
display: flow-root，它是专为清除浮动设计的现代方案，不裁剪position: absolute内容，Chrome 58+/Firefox 58+/Safari 10.1+ 都支持 - 兼容老浏览器？用伪元素清除：
.clearfix::after { content: ""; display: table; clear: both; }，注意content: ""不能省，否则无效 - 别用
overflow: hidden硬撑高——它会意外裁剪box-shadow或绝对定位弹层，是掩盖问题，不是修复
响应式断点里浮动错位，只改float: none不够
小屏下取消浮动，但子项仍保留width: 25%和margin-right: 8px，块级元素默认width: auto，反而撑破容器。错位根源不是 float 没关，是 width 和 margin 没同步重置。
- 媒体查询里必须同步改三处：
float: none、width: 100%（比auto更可控）、margin-right: 0 - 如果父容器有
padding，确认它是否也设了box-sizing: border-box，否则width: 100%会叠加 padding 变宽 - 现代项目别硬扛 float：
display: flex或display: grid下，float属性直接被忽略，列宽由flex-basis或grid-template-columns定义，可控性高得多
真正难处理的不是某个单一属性，而是box-sizing没生效 + HTML 空格残留 + BFC 缺失 + 响应式断点未同步重置——这四者只要漏掉一个，Computed 面板里看到的 width 就可能是错的，而你还在 Styles 里反复调样式。
