父容器padding“有但看不见”是因高度塌陷为0，并非padding失效；真正解决需触发BFC，首选display: flow-root，overflow: hidden虽有效但会裁剪溢出内容，box-sizing: border-box对此无效。
浮动导致父容器高度塌陷，padding“有但看不见”
不是padding没生效，是父容器高度算出来为0，整个盒模型被压缩没了——padding还在，只是没空间可展示。浮动子元素（比如float: left）脱离文档流，父容器在布局阶段直接“忽略”它们的高度计算，只按内部非浮动内容（可能为空）来定高。
常见现象：.parent { padding: 20px; background: #eee; }，里面两个float: left的盒子，结果背景色不显示、边框贴着内容、后续兄弟元素直接叠上来。
overflow: hidden 能撑开高度，但会意外裁剪内容
给父容器加overflow: hidden确实能触发BFC，让高度包含浮动子元素，padding也就自然可见了。但它附带副作用：
-
position: absolute子元素（如下拉菜单、tooltip）超出父容器时会被无声裁掉 - box-shadow、负
margin拉伸区域、横向滚动表格全失效 - iOS Safari 中
overflow: auto可能引发滚动卡顿
别把它当万能开关，尤其在含交互组件的容器里。
立即学习“前端免费学习笔记（深入）”；
display: flow-root 是现代首选，无副作用
display: flow-root是专为解决这类问题设计的值：它创建BFC，强制包裹浮动子元素，同时不改变盒模型尺寸、不裁剪、不加滚动条、不干扰z-index层级。
实操建议：
- 优先写
.parent { display: flow-root; padding: 20px; } - 兼容性查一下：Chrome 64+、Firefox 59+、Safari 15.4+、Edge 79+都支持；IE全不支持
- 老项目若需兼容IE8–10，改用
.clearfix::after伪元素方案，但要确保display: table或display: block
别用 box-sizing: border-box “修复”父容器padding
box-sizing: border-box只影响**单个元素自身宽高的计算方式**，对父容器是否能感知浮动子元素高度毫无作用。给父容器设这个属性，padding依然白写。
它真正该用的地方是浮动子元素自身：比如两个float: left的卡片各设width: 50% + padding: 16px，默认content-box下总宽超100%必然换行；这时统一加* { box-sizing: border-box }才有效。
把父容器塌陷和子元素换行当成一件事调，八成越调越乱。
