使用 overflow:hidden 触发 BFC 可解决浮动导致父元素高度塌陷问题，使 padding 正常显示。示例中父元素设置 overflow: hidden 后，能正确包裹浮动子元素。其他方案包括 clearfix、display: flow-root、flex 或 grid 布局。BFC 特性确保包含浮动元素，推荐现代布局逐步替代 float。
当子元素使用 float 后，会脱离文档流，导致父元素无法正确感知其高度，从而使得父元素的 padding 在视觉上“失效”——实际上 padding 仍然存在，但子元素可能溢出或布局错乱。解决这个问题的关键是让父元素形成BFC（块级格式化上下文），从而包含浮动元素。
使用 overflow:hidden 触发 BFC 包含浮动
给父元素设置 overflow: hidden 是最常用且有效的解决方案之一。这个属性会让父元素成为一个 BFC 容器，自动包含内部的浮动元素，从而恢复正常的盒模型表现，使 padding 正常起作用。
示例代码：
浮动元素.parent { padding: 20px; background-color: #f0f0f0; overflow: hidden; / 关键：触发 BFC / }
.child { float: left; width: 100px; height: 50px; background-color: #007acc; }
此时，.parent 会正确包裹 .child，padding 也会在上下左右正常显示，不会被浮动元素“穿透”。
立即学习“前端免费学习笔记（深入）”；
其他可替代方案
除了 overflow:hidden，还有几种方式也能达到同样效果：
- 使用 clearfix 类：在父元素上添加一个clearfix类，通过伪元素清除浮动。
- display: flow-root：现代推荐方式，专门用于创建 BFC，语义更清晰。
- 父元素也设为浮动：不推荐，会影响整体布局结构。
- 使用 flex 或 grid 布局：从根本上避免使用 float 布局，更符合现代开发习惯。
为什么 overflow:hidden 有效？
CSS 规定，设置了 overflow: hidden（且值不为 visible）的块级元素会建立一个新的 BFC。BFC 的特性之一就是能包含内部的浮动元素，不会发生高度塌陷。因此，父元素能正确计算高度，padding 自然也就生效了。
基本上就这些。用 overflow:hidden 是简单可靠的修复方式，尤其适用于传统浮动布局。如果项目允许，建议逐步迁移到 flex 或 grid，减少对 float 的依赖。
