浮动元素的 width: 50% 是相对于父容器 content box 的宽度计算的，不包含父容器的 padding 和 border，也不受子元素自身 padding、border 影响；绝对定位元素例外，其百分比宽参照父容器 padding-box。
浮动元素的百分比宽度以谁为基准
浮动元素的 width: 50% 是相对于**父容器 content box 的宽度**计算的，不是整个父元素宽，也不是 padding-box 或 border-box。哪怕父容器写了 width: 100%，只要它自身没有显式宽度（比如 width: 600px 或处于 flex/absolute 上下文中），它的 content width 就可能由子元素撑开，导致百分比失效或循环计算。
常见错误现象：.item { float: left; width: 25%; } 四个并排却换行；Computed 样式里每个 width 看起来是 25%，但总和超 100%——问题不在百分比本身，而在“25%”算的是哪个宽度。
- 父容器若有
padding: 20px，它的 content width = 总宽 − 40px，子元素width: 100%只能拿到这个缩水值 - 子元素自己再加
padding: 8px和border: 1px（且box-sizing: content-box），实际占位 = content width + 16px + 2px → 必然溢出 - 绝对定位元素例外：它的百分比
width是相对于父容器的 padding-box 宽度，不是 content-box
为什么 box-sizing: border-box 不能自动解决溢出
box-sizing: border-box 只把子元素自身的 padding 和 border 吸进 width 里，但它对父容器的 padding 和 border 完全无感。而浮动元素的百分比始终按父容器的 content width 计算，父容器那 40px 的 padding 还在那儿挤占空间。
所以即使所有子项都写了 box-sizing: border-box，只要父容器有 padding，它们依然会溢出。
- 全局
* { box-sizing: border-box }是基础，但不等于万能；第三方 CSS 或重置样式可能覆盖它 - 临时调试时给父容器加
outline: 1px solid red，一眼看出子元素是否“凸出来” - 检查 computed 样式里的
box-sizing值，别信 CSS 文件里写了就生效
calc() 修正宽度时最容易漏掉的三项
用 calc(33.3333% - 2px) 替代 width: 33.33% 能控制四舍五入误差，但必须同步处理三类固定开销，否则照样溢出：
-
列间间隙：比如三列布局，两处列间
margin-right: 10px，总 gap = 20px → 单列减calc((100% - 20px) / 3) -
子元素边框：若每列有
border: 1px solid，左右共 2px → 在 calc 中统一减掉 -
父容器 padding：父容器
padding-left: 16px; padding-right: 16px→ 总压缩 32px，也要计入 calc 分母
IE9 支持 calc()，但语法严格：必须写 calc(100% - 2px)，不能省空格；/ 不是除法运算符，calc(100% / 3) 是非法写法，应写 calc(33.3333%) 或 calc(100% * 1/3)。
浮动布局中 margin-bottom 为什么无效
浮动元素脱离文档流，它的 margin-bottom 不参与父容器高度计算，容易造成父容器塌陷——看起来“没高度”，其实是子元素没把父容器撑起来。
- 不要对浮动子项设
margin-bottom来控制垂直间距，改用padding-bottom或在父容器上设padding-bottom - 清浮动必须做：
.parent::after { content: ""; display: block; clear: both; }，否则父容器高度为 0 - 如果需要等高列，浮动本身不保证高度一致，得靠 JS 或改用
display: flex
真正麻烦的不是怎么写 calc，而是每次改一个值（比如加个 border、调个 font-size）都得重新算一遍所有影响项——浮动布局的脆弱性就在这里。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
