高度塌陷、清除浮动、元素垂直居中

---

高度塌陷：

定义：父元素没有设置高度，子元素设置了浮动（float）属性
解决办法：清除浮动（仅清除浮动的负面影响，不会影响其它元素）

---

清除浮动

目的：清除浮动是为了解决高度塌陷问题和元素重叠问题

清除浮动的常用方法：

1）添加空盒子

定义：在被浮动的元素（同级元素）后添加一个空的div，赋给空盒子.clean{ clean：both；}
不足：导致页面添加的空盒子太多，造成代码冗余

2）overflow：hidden；

定义：给浮动元素的父元素添加属性.clean{overflow：hidden；}文本溢出，具有清除浮动的功能。
缺点：在开发时，有些公司会严格要求技术特点

3）万能清除法

.box:after{display: block;clean: both;content: "";visibility: hidden;height: 0;}
.box{zoom: 1;}

        .box:after{          /*:after或：：after，是伪对象,前面可以有：或：：*/
            display: block;
            clean: both;
            content: "";    /*此句代码是和伪对象配合使用的*/
            visibility: hidden;
            height: 0;
        }
        .box{
            zoom: 1;
        }

开发常用此方法，使用伪对象，兼容IE浏览器

---

元素垂直居中的常用方法

1\2\3\4 的方法能让 所有类型元素 垂直居中，包括行内块元素img。

1）解决行内块元素{margin：0 auto；}不能居中问题

img的垂直居中问题

父元素：{text-align：center；}
子元素：{display：inline-block； vertical-align：middle；}
在当前子元素后面添加同级元素，并进行如下设置：
{display：inline-block；vertical-align：middle； width：0；height：100%；}

2）定位（子绝父相：子元素绝对定位，父元素相对定位）

父元素：{position：relative；}
子元素：{position: absolute; left: 0;top: 0;right: 0;bottom: 0;margin: auto;}

        div{
            width: 500px;
            height: 300px;
            position: relative;
        }
        div p{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            margin: auto;
        }

注意：代码顺序可以改变

3）定位（子绝父相）

父元素：{position：relative；}
子元素{
position：absolute；
left：50%；
top：50%;
margin-left：子元素自身width的一半；
margin-top：子元素自身height的一半；
}
注意：此方法的语法是固定不变的，但人是灵活的

       div{
            width: 500px;
            height: 300px;
            position: relative;
        }
        div p{
            width: 200px;
            height: 200px;
            position: absolute;
            right: 50%;
            bottom: 50%;
            margin-right: -100px;
            margin-bottom: -100px;
        }

        div{
            width: 500px;
            height: 300px;
            position: relative;
            margin:0 auto;
        }
        div p{
            width: 200px;
            height: 200px;
            position: absolute;
            left: 50%;
            top: 50%;
            margin-left: -100px;
            margin-top: -100px;
        }

4)弹性盒（flexbox）

父元素：{display:flex;justify-center;align-items:center;}

       div{
            display: flex;    /*将div转为弹性盒*/
            justify-content: center; /*水平方向*/
            align-items: center;     /*垂直方向*/
        }