布局与定位是CSS学习中最重要的一块，它将贯穿你的整个前端职业生涯，这篇文章就介绍DIV+CSS的几种布局与定位方法。
布局（脱离文档流）
- 左右布局
- float+clearfix
<父元素 class="clearfix">
.clearfix::after{
content:'';
display:block;
clear:both;
}
子元素{
float:left(right);
}
首先让块级元素（列表元素）浮动起来，再在其父元素上加一给clearfix类，用于清除其父元素的浮动。
接着将列表元素的宽度设为50%，那么就会自然的产生一个左右布局的效果了。
- relative+absolate（绝对定位）
为了制作更多复杂的布局，运用position属性是非常重要的。目前我们学了position=fixed;(相对窗口定位)和position=relative;
position=absolate;(绝对定位-相对父元素定位)
父元素{
position=relative;
}
子元素{
position=absolate;
top: xxx px;
left: xxx px;
}
这会让子元素相对于父元素（上级第一个relative）的位置定位，接下来怎样布局都可以了。
- 左右中布局
左右中布局的主要方法也是利用浮动或者绝对定位，甚至两者结合，不过是看情况实用的，主要利用的属性就是margin，和绝对定位啦。
-
float+marginfloat+margin.jpg
-
float+absolutefloat+absolute.jpg
居中
- 水平居中
margin:0 auto;
适用于块级元素，也就是display=block;text-align:center
适用于内联元素，inline-block；，以及文字。使用方法是给该元素的父元素添加该样式（利用父元素包裹子元素）。调整padding,margin(内边距和外边距)
直接调整外边距和内边距以达到水平居中的效果，如果不方便，可使用包裹器包裹该元素，使用包裹器代为调整。
- 垂直居中
调整行高，line-height= xxx px;
大多数情况下都是管用的调整padding,margin（内边距和外边距）
直接调整外边距和内边距以达到水平居中的效果，如果不方便，可使用包裹器包裹该元素，使用包裹器代为调整。
其他
如何让内联元素产生上下位移
由于内联元素的性质，它的margin和padding左右有效，上下却是没效果的，这时给它加上"display=inline-block"就可以产生效果了。经常使用包裹器
有些时候，一个div可以做到改内部样式，却做不到调整自身本身的位置。
这时候就要在外面写个div，将其包裹起来，然后使用父元素的padding和margin来调整元素位置。对块级元素设置inline-block会发生什么？
块级元素宽度收缩
块级元素不写宽度的情况下，默认宽100%（毕竟占据一行）。
加入inline-block，宽度自动适合内容块级元素下方会产生空隙
解决方法是使用vertical-align:top;来解决这个空隙。
状态机，js相关，暂时不描述
box-sizing:border-box盒模型
在计算宽度的时候，加入这个可以将接下来加入的宽度算入整体宽度中（这样就不会影响父元素，破坏左右布局了）
