浮动元素加padding后溢出父容器，是因为box-sizing:content-box下width仅含内容区，padding额外叠加导致总宽超限，且浮动脱离文档流使父容器高度塌陷；解决需统一box-sizing:border-box、用display:flow-root创建bfc并避免html空白符。
浮动元素加 padding 后超出父容器，不是 padding 本身“出错”，而是它叠加在已声明的 width 外面，而父容器又没撑开高度或预留空间——本质是盒模型 + 浮动脱离文档流双重作用的结果。
为什么 padding 会让浮动元素“变宽”并溢出
默认 box-sizing: content-box 下，width 只管内容区，padding 和 border 都额外加在它外面。比如：
.item { float: left; width: 100px; padding: 12px; }
实际占宽是 100px + 12px + 12px = 124px。若父容器只有 width: 240px，两个这样的元素就直接超了。
- 开发者工具里看「Computed」面板的
Total Width，别只信你写的width - HTML 源码中浮动元素之间若有换行或空格，还会额外增加约 4px 间隙，进一步压缩可用宽度
- 百分比宽度（如
width: 33.33%）遇上padding更危险：小数误差 + padding 累积，三列轻松破百
父容器不显示 padding 背景，其实是高度塌陷
浮动子元素脱离文档流，父容器计算高度时“看不见”它们，结果高度为 0 —— padding 还在，但没空间渲染，背景、边框全失效。
- 常见现象：
.parent { padding: 20px; background: #eee; }，里面两个float: left元素，结果背景色不显示、后续兄弟元素直接叠上来 -
overflow: hidden能触发 BFC 让父容器包含浮动，但会裁剪position: absolute子元素、box-shadow、负 margin 区域等 - 现代首选是
display: flow-root：创建 BFC，撑高容器，且无裁剪、无滚动条、不干扰层级
怎么让 padding 不再导致溢出或换行
关键不是去掉 padding，而是控制总宽度和父容器行为：
- 所有浮动项统一加
box-sizing: border-box，让width包含padding和border（推荐全局重置：* , *::before, *::after { box-sizing: border-box; }） - 避免给浮动项同时设
margin-right和margin-left；用.item:not(:last-child) { margin-right: 12px; }控制间距更安全 - 浮动项之间 HTML 不要换行或空格：
<div class="item"></div> <div class="item"></div>连写，防隐式间隙 - 父容器用
display: flow-root替代overflow: hidden，尤其当内部有下拉菜单、tooltip、横向滚动表格时
真正麻烦的从来不是单个 padding，而是它和 float、box-sizing、HTML 空白符、父容器 BFC 状态混在一起时，哪个环节没对齐，整行布局就突然错位——查问题得从「Computed」面板里的 Total Width 和 height 开始，而不是只盯着 CSS 声明看。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
