总结：高度塌陷

1、高度塌陷的触发条件：

父元素高度不写，且所有的子元素都浮动（float）了，那么父元素会发生高度塌陷。（只有满足这两个条件才会塌，如果不满足这两个条件就不会塌）

2、发生高度塌陷的原理：

因为子元素浮动之后，子元素所在的盒子是悬在页面之上的且不占位，所以父元素会高度塌陷。

通俗点理解就是子元素浮动之后，盒子悬空在页面之上，悬上去之后，它就不再占据浏览器的位置了，所以对于当前的父元素来说，他的高度就变成了0。

3、高度塌陷的解决方法

（1）给塌陷的盒子添加 overflow:hidden。

（2）在布局中，给所有的浮动的盒子的最下面添加一个空标签，且在样式中对空标签添加声明clear：both；

（3）使用万能清除法

塌陷的盒子：after{content:“”;

display:block;

clear:both;}

注意：方法（2）仅作了解，因为在搭建页面的时候，使用浮动是比较常见的，而一遇到浮动所引起的高度塌陷就在布局中添加空标签，会造成我们代码上多了很多没有用的标签，那对于用户体验来说的话，就造成了代码的冗余，对代码优化很不友好；方法（3）比较常用，建议多用，熟练掌握；其中，方法（2）的原理是：清除浮动（打破横向排列），目的是为了让横着排列的盒子竖着排列。（彩蛋：一般来说浮动都自带一些问题，一旦元素使用浮动，为了避免浮动带来的麻烦，通常在其父元素身上使用方法（3）来清除浮动）