浅谈高度塌陷

高度塌陷：
第一种情况、
假如给嵌套块元素垂直添加外边距会引起高度塌陷：
父子级别关系，给子元素添加同一方向添加maring值的话，会造成高度塌陷（比如子元素添加了margin-top）：
那么解决方案有三种：
01可以为父亲定义一个上边框(颜色设置为透明：transparent)，
02可以给父亲添加一个内边距，
03可以给父亲添加overflow:hidden;

 border-top: 1px solid transparent; 
 padding:1px
overflow: hidden; 

第二种情况 、
由于大多数情况下，父元素不方便给高度，由子元素来撑开父元素，添加浮动后，脱离标准流，就使得父元素高度为0，造成高度塌陷（影响下面的标准流盒子）
清除浮动（闭合浮动）：
清除浮动的原因： 1，父元素没有高度 2，子盒子浮动 3，影响下面的标准流， 我们就应该清除浮动
本质：清除浮动造成的影响；
语法： clear:both; 清除两边的浮动 （left,right左右)
其中有着五种解决方案：

方法一：额外标签法：必须是块状元素，在父元素最后一个元素后面添加额外标签 （类名为clear）,不建议使用。

    .clear {
        clear: both;
    } 

方法二：在浮动的元素的父元素添加 overflow: hidden; 就行，但是无法显示溢出的内容

overflow: hidden; 

方法三：在父亲添加一个clearfix类 类似于额外标签法的升级版 在父元素添加了盒子 常用。

 /* 方法三：在父亲添加一个clearfix类 类似于额外标签法的升级版 在父元素添加了盒子  常用
        .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            overflow: hidden;
            visibility: hidden;
        }

        .clearfix::after {
            *zoom: 1;
        } */

        /* 方法四：
        .clearfix::before,
        .clearfix::after {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        } */

方法五：就是给父元素添加最小高度，和overflow：hidden；