方法 - 清除浮动

浮动问题：
子元素使用float浮动后，脱离文档流，导致父元素高度变为0
解决方案：

1. 父元素使用 overflow: hidden/auto; 属性
2. 父元素也添加 float 浮动
3. 使用伪元素 after 搭配 clear: both;。或使用空元素，原理是相同的。

4. IE浏览器下需要给父元素添加 zoom: 1; 属性，触发 haslayout 。

   方法 - 元素水平垂直居中

5. 定位 + transform：

div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

1. 定位 + margin：

div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

1. flex布局：

.parent { display: flex; flex-flow: row; justify-content: center; align-items: center; }

1. 文字居中（text-align搭配line-height）：

span { width:100px; height: 50px; text-align: center; line-height: 50px; }

单位 - rem、em、vh、px 各自代表的含义？