什么是高度塌陷？你真的懂高度塌陷吗？

---

前言

     不知道大家在布局盒子的时候，如果不给父级盒子设置高度，但是子元素有自己的高度，此时父级盒子高度是由子元素撑开的，如果给子元素设置浮动，父元素高度就会降低，这就是高度塌陷。

废话不多说，直接上解决方案：

1.父元素添加一个固定的高度(最小高度)

​2.本质原因:前面元素浮动,导致后面元素上去补位置了==产生的高度塌陷

​    不想让后面的元素补位置;===给后面补位元素清除浮动带来的影响.clear:both

3.前提:父元素里面只有一个子元素,或者是多个子元素都添加浮动时可以使用下面方法

​	(1)给父元素添加overflow:hidden属性。弊端：会让盒子外定位的元素也隐藏，不推荐

​	(2).悄悄在浮动元素后面补一个块级元素，并给这个块级元素设置clear:both,即清除浮动的影响。

​		弊端：平白无故多了一个结构。

4.使用万能清除法
     .类名:after{
                    /*语法必备的*/
                    content:" ";
                    /*追加的一个行内*/
                    display:block;
                    /*行内元素不能直接清除浮动带来的影响*/
                    clear:both;
                    width:0px;
                    height:0px;
                    overflow:hidden;
                    visibility:hidden;
                    font-size:0px;
                    pacity:0
                }