父元素padding无效是因浮动导致高度塌陷，而非padding失效；真正解决需触发BFC，如display: flow-root或::after+clear:both，box-sizing: border-box仅防子元素换行。
父元素加了padding却没效果，是因为高度塌陷
不是padding没生效，而是父元素高度为 0，导致padding撑在“看不见的盒子里”。浮动子元素脱离文档流，父容器无法感知其存在，计算高度时直接忽略——此时哪怕写padding: 50px，视觉上也完全不显示。
box-sizing: border-box 对浮动布局没直接作用
box-sizing: border-box只影响单个元素自身的宽高计算逻辑（让width包含padding和border），但它**不解决父容器是否能包裹浮动子元素的问题**。给父元素设box-sizing: border-box，对恢复高度、让padding可见毫无帮助。
- 它解决的是“浮动元素自身因
padding变宽导致换行”的问题，不是父容器塌陷 - 常见误用：把
* { box-sizing: border-box }当成万能药，结果父padding还是白写 - 真正起作用的是触发 BFC（块级格式化上下文），不是盒模型切换
让父元素padding生效的实操方案
必须先让父元素重新获得真实高度，padding才能被看见。优先级从高到低：
-
display: flow-root—— 最干净：不干扰溢出，不裁剪下拉菜单或阴影，兼容性到 IE11+，现代项目首选 -
::after伪元素 +clear: both—— 兼容 IE8+，结构无侵入，但要确保伪元素是display: block（table也行，但inline会失效） -
overflow: hidden—— 快但危险：一旦子元素有绝对定位偏移、下拉菜单、投影延展，内容会被无声裁掉
别碰height或min-height硬撑：它们无法响应内容变化，且不能修复后续兄弟元素的错位。
浮动元素自身padding引发的换行怎么防
这才是box-sizing: border-box真正该用的地方。比如两个float: left的卡片，每个设width: 50%、padding: 16px，默认content-box下总宽就超 100%，第二张必然换行。
- 统一加
* { box-sizing: border-box }，让width包含padding - 注意
border也会被包进去，如果已有border又改box-sizing，可能需要微调width - 老项目中 IE6–8 的双倍
marginbug 还得单独处理，box-sizing救不了这个
父容器padding失效和子元素padding撑宽换行，是两件事。混在一起调，八成越调越乱。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
