高度坍塌的几种解决方法

一 什么是高度塌陷
当父元素没有设置高度时，此父元素里面的子元素又添加了浮动属性，此时会出现高度塌陷。
二 高度塌陷的原理
出现高度塌陷的元素中，它的子元素添加了浮动，因为浮动不占据空间，脱离了文档流，这时候父元素又没有设置高度，此时父元素的高度没有被撑开，就是我们常说的元素“高度坍塌”问题。
三 高度坍塌解决方法
方法一：
1.给出现高度坍塌的元素添加overflow：hidden属性。
2.原理：overflow：hidden可以触发bfc，bfc规定：在计算bfc高度时，bfc里面的浮动元素也参加高度的计算。
3.代码实现
（1）html

（2）css
方法二：
1.在浮动元素的下面添加一个空的元素，并且给这个元素设置clear：both；
2.原理：
a.首先，我们需要了解浮动原理是：当给一个元素添加浮动时，该元素会在同一行内预留空间给下一个元素，也就实现了块状元素可以同在一行内排列的问题。
b.清除了浮动的原理后，再来说说clear：both，clear：both指的是清除元素的左右浮动，即忽略掉上面的浮动元素给它预留的空间，因为忽略掉了预留的空间，新添加的空元素不会在浮动元素预留的空间中占位，它会在下一行占空间，从而把父元素的高度给撑开了，也就解决了高度坍塌问题。
3.代码实现
(1)html

(2)css

方法三：
万能清除法(常用的方法)
1.语法格式如下
高度坍塌的元素：after{
content:".";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
}
2.代码实现
（1）html

（2）css