css高度塌陷问题

首先什么是高度塌陷?

当我们需要给页面设置自适应宽高的时候,在文档流中,父元素的高度默认的情况下是被子元素的高度撑开的,子元素的高度就是父元素的高度,当我们给子元素设置了浮动厚,子元素就会脱离文档流;
当你第一次给父元素设置自适应的时候,又给子元素设置浮动元素的时候,你就会发现,父元素的高度没有了,这就是子元素无法撑起父元素的高度,从而导致了父元素的高度塌陷.

我们举例说明一下,首先我们建立一个父元素嵌套一个子元素:

给他们加些样式:

接下来我们看到的结果就是:
可以看出,我们给父元素设置的100%高度,高度自适应.所以子元素200的像素高,所以父元素也是200像素高,然后我们给子元素加一个浮动属性
这个时候再看看页面的变化:

可以看到,子元素没有变,而父元素宽还在,但是高度没有了.
这就是父元素的高度塌陷,那么我们怎么解决这种问题?因为是高度没有了,那么我们给父元素一个高:
效果出来是这样:

虽然高度有了,但是子元素并没有在父元素里面,也就是说自适应的效果没有了,所以这个办法是不行的,接下来我们用BFC的显示原则去解决,由于BFC的区域不会与float box重叠，给父元素添加属性overflow：hidden;看看效果
可以看到，父元素高度被撑开了，但是如果给子元素里加上文字
出来的效果就是 可以看到字体被隐藏了，这也是这个方法的弊端。
那么我们还有别的解决方法吗，有的：
首先给子元素旁边加个空标签
给他清除浮动的属性
这样出来的效果也是可以的

他的缺点就是会有很多空标记，增加结构负担，产生代码冗余；这里不推荐使用。
其次我们还可以给父元素添加display：table；让父元素转换元素类型跟表格的特性一样，代码是这样的
效果如下：

可以看出，也是可以的，但这个方法改变了父元素的元素类型，我也是不推荐的，还有最后一个办法，就是万能清除法，我们需要给父元素加上属性：

效果如下

这个办法也是可以的，而且是我本人推荐使用的方法。
接下来我把几个办法总结出来：

1、可以给父元素固定高度去解决解决高度塌陷问题，
弊端：但是不能让元素高度自适应了 。
2、overflow：hidden; 解决高度塌陷并能实现高度自适应
（遵循BFC的显示原则）
弊端：只要里面的内容或者元素超出父元素以外，就会被隐藏；
3、在浮动元素的下方添加一个空元素，并且给他设置属性
空标记：

clear:both;
弊端：会添加很多空标记，增加结构负担，产生代码冗余；4、display:table;
给父元素添加display：table；
让父元素转换元素类型跟表格的特性一样；
弊端：会改变当前元素的元素类型；
5、万能清除法：
:after{
content:“";
clear:both;
display:block;
height:0;
overflow:hidden;
visibility:hidden;}
推荐使用！！
总结来说，当你写的元素用到了浮动，这个时候你就要考虑自适应的高度会不会显示出来，这里就可以用到这几种方法，希望可以帮到你们。