浮动导致父容器高度塌陷，使padding不显形；可用overflow触发bfc或伪元素清除浮动修复，现代开发推荐flexbox替代浮动。
浮动元素让父容器高度塌陷，内边距不生效
父元素设置了 padding，但视觉上完全没反应——大概率是里面子元素用了 float，导致父容器计算高度时“看不见”它们。这不是 bug，是 CSS 浮动的原始行为：浮动元素脱离文档流，父容器高度按“剩余非浮动内容”计算，经常变成 0。
常见场景：用 float: left 做多栏布局、导航菜单、图片环绕文字；父容器加了 padding: 20px 想留白，结果内容紧贴边缘。
- 别指望
padding在塌陷的父容器上“显形”，它还在，只是容器高为 0，没地方展示 -
overflow: hidden或overflow: auto是最轻量的修复方式，原理是触发 BFC（块级格式化上下文），强制包含浮动子元素 - 如果父容器本身需要滚动或隐藏溢出，
overflow: hidden会意外裁剪内容，这时改用overflow: auto更安全 - 现代项目优先考虑用
display: flex或display: grid替代浮动布局，从根源避免这个问题
clear:both 清除浮动但不解决内边距显示问题
在浮动元素后面加一个空 div 并设置 clear: both，确实能撑开父容器高度，但容易漏掉关键一步：这个清除元素必须在父容器内部、且不能被其他样式（比如 margin-top 折叠）干扰。
典型错误：把 clear 元素写在父容器外面，或者用 margin-bottom 代替 padding-bottom 试图“模拟”内边距，结果响应式下错位、打印样式异常。
立即学习“前端免费学习笔记（深入）”；
- 清除元素必须是父容器的最后一个子节点，且无
height、margin等干扰属性 - 更稳妥的做法是用伪元素：
::after+content: ""+clear: both，避免额外 DOM 节点 - 伪元素方案要加上
display: table或display: block，否则在某些旧版浏览器中不生效 - 如果父容器有
border-radius或background，仅靠clear可能导致圆角被切断，此时仍需 BFC 触发
Flexbox 替代浮动后，padding 自然生效
一旦把 float 换成 display: flex，父容器默认就是 BFC，高度自动包含所有子项，padding 立刻可见。这不是“修复”，而是绕开了浮动的设计限制。
适用场景：两栏/三栏布局、卡片网格、导航条对齐——只要不是必须兼容 IE9 及以下，就值得切换。
- 主轴方向用
flex-direction: row（默认）或column，不再需要float控制流向 - 子项宽度用
flex: 1、flex: 0 0 200px等控制，比float+width组合更可控 - 旧代码迁移时注意：浮动元素的
margin可能因脱离文档流表现异常，Flex 下所有margin都按标准盒模型计算 - IE10+ 支持 Flexbox，但部分老语法（如
display: -ms-flexbox）已废弃，建议用 Autoprefixer 自动生成兼容前缀
检查是否真由浮动引起，还是其他原因
看到 padding 不生效，别急着清浮动。先确认是不是浮动导致的——很多情况其实是别的问题在冒充。
用浏览器开发者工具选中父元素，看 computed height 是不是 0；再 hover 子元素，看它们是否标为 “floated”；同时排查其他常见干扰项。
- 子元素用了
position: absolute或fixed，也会脱离文档流，效果类似浮动 - 父容器设置了
height或max-height，硬性限制了尺寸，padding 被挤到可视区外 - 存在未闭合的 HTML 标签（比如漏了
），导致 DOM 结构错乱，CSS 作用域异常 - 使用了 CSS 重置库（如 normalize.css），某些版本会把
body的margin设为 0，误以为是 padding 失效
overflow 或伪元素）见效最快；长期维护建议逐步替换为 Flexbox。浮动本身没被淘汰，但它和内边距、背景、圆角这些基础样式配合时，总要多想一层“它还属于这个盒子吗”。 
