CSS布局
1.固定布局
2.流动布局
3.响应式布局
4.浮动布局 （PC端网页）
5.flex布局（移动端）
6.定位布局
7.rem布局 （移动应用）
浮动带来的影响
元素一旦浮动会脱离文档流，不占位
1.浮动的元素会覆盖正常没有浮动的元素
2.子元素会导致父元素（无高度）塌陷
清除浮动
1.增加挡板元素
.clearFix {
clear:both;
zoom:1; /*兼容IE*/
}2.父元素中子元素浮动
.father {
overflow: hidden; /*存在溢出隐藏bug*/
zoom: 1;
}3.万能清除
.father::after {
content: ; /*兼容好，无bug*/
height: 0;
display: block;
clear: both;
zoom: 1;
}定位
不能用作主要布局方式，主要用于鼠标移入特效 如：下拉菜单、楼层导航、固定导航条
position:static/fixed/absolute/relative 静态/固定/绝对/相对
定位元素具有堆叠次序
z-index:number (值越大，次序越高)
固定定位：依赖浏览器窗口
子绝父相
绝对定位：默认依据浏览器左上角定位，若其父、祖先元素具有相对定位，则依赖其父、祖先元素 定位。
相对定位：相对元素自身当前所处的位置，元素占用标准文档流。（大多数情况下为给绝对定位的 元素做定位基准使用）
