2024年1月7日发(作者：)

css父元素高度塌陷解决方法

CSS元素的高度"塌陷"是指元素的高度由于内容自动撑开而变高，却未为外层容器注入更多的高度，导致外层容器没有"感知"到元素的变化，而致使外层容器无法包含元素。

那么，如何解决CSS中父元素高度塌陷的问题呢？下面介绍一下常用的解决办法：

1、使用虚拟布局：

虚拟布局指可以设置内联元素的一些特殊性能，如元素的上下margin、行高等，可以使浮动元素定位更加明确，当父元素内容上下不对齐时，给父元素添加额外的padding值也可以解决CSS中父元素高度塌陷的问题。

2、使用BFC：

BFC 是Block Formatting Contexts 的缩写，它可以为元素提供一个独立的渲染环境，使其不会影响到外界的元素，也不会受到外界元素的影响，因此可以解决内部元素的高度塌陷问题。可以通过设置overflow:hidden; 和height: auto; 来触发BFC，以解决CSS中父元素高度塌陷的问题。

3、使用多个div：

在CSS中为了解决父元素高度塌陷问题，最常见的一种做法是将父元素分解成多个div，每个div都设置float属性，使得每个div都可以浮动，从而避免父元素高度塌陷的问题。

4、使用Flex布局：

Flex布局是CSS3新增的一个弹性布局模式，在绝大多数情况下都能很好的解决父元素高度塌陷的问题。