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布局：html的flex布局
Flex布局是CSS3新增的一个弹性布局模式，在绝大多数情况下都能很好的解决父元素高度塌陷的问题。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。