CSS布局
一个元素在页面中一般有4种状态：
- 普通文档流（默认值）
- 使用了float的浮动
- relative或者absoult的定位, 相对于浏览器的flexd。
CSS定位只要依靠position属性实现，该属性有四个值:
float:
设置元素浮动， 该元素将脱离普通文档流。直到外边缘或者另一个浮动块的边缘。
注意，浮动对于普通流元素会形成一个挤压的状态， 比如<a></a><div></div> 这样一个布局，
如果设置div元素浮动，那么a元素就会被挤压到div元素的后面去。
同时，float元素的尺寸讲不会计入父元素的尺寸中， 所以， 这里就涉及到一个清除浮动的概念：
清楚浮动的几种做法：
1.父元素设置ovflow:hidden;
2.在需要清除浮动的底部加一个div标签， 同时，将这个标签clear:both;
3.使用伪类清楚浮动：在父元素上添加一个clear类 同时，讲该类设置成：
{
clear: both;
content: " ";
display: block;
height: 0;
visibility: hidden;
}
ralative
相对定位原有位置不脱离普通文档流，相对自己原有的位置进行定位。
absolute
绝对定位， 脱离原有定位，相对于祖先中，已经定位的元素（相对和绝对）进行定位。
flexd
相对于浏览器定位， 不会随着滚动条滚动。
z-index: 对于relatvie absolute fixed 可以设置堆叠顺序。 值越大越在上面。
CSS中水平和垂直居中
水平居中：
1)行框： 只需要在父级元素中设置 text-align:center;
2)块级框：父级元素 margin:0 aoto;或者设置父级框 text-align:center;
垂直居中：
单行框：一般设置子元素 height 和 line-height一致就可以实现。
多级行框: 借助vertical-align: middle; 实现.
-
块级框:
a)知道height ：子元素设置为position: absolute; top: 50%; height: 100px; margin-top: -50px;
b)不知道height:子元素设置为：
position: absolute;
top: 50%;
transform: translateY(-50%);
3.于此同时， 设置合适的内边距也可以实现垂直和水平居中。
4.flex布局对于实现垂直居中更加简洁方便。
