本文详细探讨了CSS中高度塌陷的问题，当子元素设置浮动后导致父元素高度消失的现象。文章通过实例展示了如何利用BFC（块级格式化上下文）、添加空标签清除浮动、设置`display: table`以及使用`clearfix`类来解决高度塌陷问题。每个方法的优缺点也进行了分析，推荐使用`clearfix`方法以保持高度自适应并避免内容被隐藏。
首先什么是高度塌陷?
当我们需要给页面设置自适应宽高的时候,在文档流中,父元素的高度默认的情况下是被子元素的高度撑开的,子元素的高度就是父元素的高度,当我们给子元素设置了浮动厚,子元素就会脱离文档流;
当你第一次给父元素设置自适应的时候,又给子元素设置浮动元素的时候,你就会发现,父元素的高度没有了,这就是子元素无法撑起父元素的高度,从而导致了父元素的高度塌陷.
我们举例说明一下,首先我们建立一个父元素嵌套一个子元素:
给他们加些样式:
接下来我们看到的结果就是:
可以看出,我们给父元素设置的100%高度,高度自适应.所以子元素200的像素高,所以父元素也是200像素高,然后我们给子元素加一个浮动属性 
这个时候再看看页面的变化:
可以看到,子元素没有变,而父元素宽还在,但是高度没有了.
这就是父元素的高度塌陷,那么我们怎么解决这种问题?因为是高度没有了,那么我们给父元素一个高
最低0.47元/天 解锁文章
扫一扫
390
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
