浮动元素百分比宽度错位是因box-sizing: content-box将padding/border算在width外，唯一解法是给所有浮动子元素设box-sizing: border-box，并配合bfc父容器、宽度总和≤100%及全局重置/::before/*::after。
浮动元素的百分比宽度错位，不是你算错了，而是浏览器按 content-box 默认规则把 padding 和 border 算在 width 外面了——box-sizing: border-box 是唯一靠谱解法，但必须设对位置、设全范围。
为什么 float + width: 33.33% 总是换行
浮动子元素的 width: 33.33% 计算基准是父容器的 content width（不含 padding/border）。如果父容器有 padding: 10px，那四列实际可分的宽度就少了 80px；再叠加每个子项默认 box-sizing: content-box 下的 padding: 5px 和 border: 1px，总宽轻松突破 100%，第二行直接掉下去。
- 错误现象：四列写
width: 25%却只显示三列，第四列换行 - 不是百分比精度问题（33.3333% 也无用），是盒模型叠加导致的像素溢出
-
overflow: hidden只能防父容器塌陷，不能修复宽度超限
box-sizing: border-box 必须作用于浮动子元素本身
父容器设了 box-sizing: border-box 完全没用——它只影响父容器自己的宽高解析，不控制子元素怎么占位。真正参与并排计算的是浮动的子项，比如 .col 或 .item。
- 必须给所有浮动子元素显式设置
box-sizing: border-box - 推荐全局重置：
*, *::before, *::after { box-sizing: border-box; }，且这条规则得放在所有 CSS 最顶部 - 第三方组件库（如 Ant Design）可能覆盖该规则，需针对性回退：
input, textarea, select { box-sizing: content-box; }
float 布局下 box-sizing 的三个硬约束
设了 box-sizing: border-box 只是起点，不是终点。浮动排列稳定还得同时满足：
- 所有浮动子项的
width加起来 ≤ 100%，且要把margin显式算进去（box-sizing不管 margin） - 父容器必须触发 BFC，否则高度塌陷 → 百分比宽度按 0 计算，推荐用
display: flow-root（现代写法）或伪元素 clearfix - 避免在浮动子项上混用
width和flex-basis等 Flex 属性，它们在 float 下被忽略，但容易误判为生效
最常被忽略的一点：伪元素（比如清除浮动的 ::after）如果不包含在 box-sizing 重置里，它仍按 content-box 解析，一加边框就撑破容器——所以 *::before, *::after 这两行不能省。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
