关于CSS中解决高度塌陷的问题

​       高度塌陷又称为高度坍塌，是CSS样式中间的bug，出现高度塌陷的原因归根在于子级元素含有浮动属性脱离了文档流，而父级元素未设置浮动属性或者未设置高度或高度为自适应auto。（注：文中效果截图均为控制台截图，故颜色误差）

 效果图：

此时，子级元素浮动，父级元素高度为0。

那么我们怎么解决这个问题呢，对于新手小白，我们简单列举四种方式。 

 第一种：给父级元素添加高度 height:value

    

效果图：

原理：可以理解为给父级元素划分好一个区域作为背景底板，使其不用元素撑起。

优缺点：直接给父级元素设置可视有效宽高能够解决高度塌陷问题，但是无法做到自适应。 

第二种：给父级容器添加overflow:hidden属性

 

 

效果图：

 原理：使用了overflow属性会触发BFC，所谓BFC(块级格式化上下文)可以理解为一个独立的区域，其渲染规则不受外界影响，其规则是浮动元素也参与高度的计算，这样便达到解决高度塌陷的目的。有兴趣的同学可以下来了解。

优缺点：不仅仅解决高度塌陷还可以做到自适应，但是如果子级元素大于了外部父级容器的大小，则超出部分会被隐藏。

效果图：

 结果：子级宽度500px超出父级300px，则隐藏掉超出的200px，只显示父级宽度的大小。

第三种：在当前容器的最后面添加一个任意标签(div)，设置属性clear:both

 效果图：

 原理：清除浮动(清除上方预留出来的空间)

优缺点：清除方便，但增加了标签，代码累赘，结构冗余。

第四种：万能清除法（推荐使用）

使用方法：

在父级容器上添加以下代码

父级容器::after{
content:'';
width:100%;
height:0;
display:block;
overflow:hidden;
clear:both;
visibility:hidden
}

 效果图：

 

原理:清除浮动，结合元素类型以及文本溢出属性解决高度塌陷，各大网站都在用这个方法解决高度塌陷，但不好理解，只需要会用

 

从github到csdn的第一篇文章，希望对大家有帮助，欢迎大家补充。