关键属性
float
浮动元素将会从文档的正常流中删除，但是不同于absolute和fixed定位，浮动元素还是会对正常流中的元素产生影响。 正常情况下浮动元素的表现有如下特点:
- 不会产生边距重叠
- 它的包含块是离它最近的块元素
- 会生成块级框架，即使它本身是行内元素 这是因为浮动会创建BFC(参见 W3C Block formatting contexts)
浮动元素的摆放有如下特点：
- 浮动元素不会超出他的包含块的content边界
- 浮动元素不会重叠
- 浮动元素不会一直上浮，他不会超过它之前的元素的顶端
- 左浮动元素必须尽可能的相左，右浮动元素必须尽可能的向右，并且尽可能的向上浮动，在满足其他约束条件的情况下
- 行内元素与浮动元素重叠时，它的边框背景和内容都在浮动元素之上显示
- 块级元素与一个浮动元素重叠时，它的边框和背景在浮动元素之下显示，而内容在它之上显示
float带来的问题以及清楚浮动这里不再赘述
position
static 默认值 元素位于正常流中
relative 相对定位 相对于元素本来的位置偏移 它原本所占的空间依然保留
absolute 绝对定位 元素将从文档流中删除 相对于它的position不是static的上级元素进行偏移 它将会生成一个块级框 即使它本身不是块级框 （同理 也是因为创建了BFC）
fixed 固定定位 表现相当于决定定位 但是它是相对于浏览器窗口进行偏移
margin
页面上的大部分间隔都是因为存在margin，而且margin不会破坏正常流，所以margin在布局中是一个很重要的属性。
margin可以设置为负值，这将会使元素超出他的父元素或者与其他元素重叠
垂直方向上的margin会产生合并，一般有三种情况，相邻元素，父元素和他的第一个或者最后一个子元素，空元素，一般会取两个margin中大的那个值。但值得注意的是浮动和绝对定位的元素的边距并不会合并
布局
三栏 两边定宽 中间自适应
双飞翼布局
{% jsfiddle hangbale/jtekk4ev html,css,result %}
双飞翼布局的优点不再赘述，这里的关键是，main需要设置浮动以及负边距的运用，
如果main不设置浮动，left是不能上移并且漂浮到左边的，同时浮动以后，这三个块可以看作是一个相左的浮动流，正常情况下，他们会从做到右排列一行，但是因为main的宽度是100%，导致left被挤下去了，使用负边距可以把它们相左拉回来。
圣杯布局
{% jsfiddle hangbale/na9aucLy html,css,result %}
可以看出，圣杯布局在实现三栏的布局上都使用了浮动和负边距，但在处理侧栏的位置上有所区别，圣杯布局使用相对定位使侧栏偏移不至于挡住main部分，相对来说，双飞翼布局的实现更加简洁。
flexbox
使用flex实现相当简单，需要注意的是main需要设置flex-grow，同时为了保证main的优先加载，需要设置order {% jsfiddle hangbale/fz6pvwo8 html,css,result %}
水平居中
text-align
在父级元素上使用text-align:center即可,这种方法适用于inline和inline-block元素
margin
适用于有最大宽度限制的块级元素，可以使用
{
margin:0 auto;
width: 200px;
/* 或者 */
max-width: 200px;
}
float
单独使用float并不能实现居中。还需要配合相对定位或者负边距。浮动的特点是创建了BFC，浏览器会重新计算浮动元素的宽度
{% jsfiddle hangbale/Lv25ky2d html,css,result %}
container浮动以后，宽度就是子元素的宽度，然后将将他想对定位右移-50%；这个50%是相对于body的，然后inner左移50%，这个百分比相对于container，这就相当于inner先向右移动窗口宽度的一般，然后左移自身宽度的一般，也就达到了居中的效果，这里的相对定位也可以采用负边距来实现。
{% jsfiddle hangbale/rxz3Ln6v html,css,result %}
绝对定位
这种方法也极其常用，特别是在作弹出层的时候
{
position:absolute;
width: 500px;
left: -50%;
margin: 0 0 0 -250px;
}
这种只适用于定宽的元素，对于不定宽的元素可以使用css3的translate:-50%,因为translate的百分值是相对于自身的宽度的，或者也可以结合上面浮动的例子组合一下。
flexbox
.container {
display:flex;
}
.inner {
margin:auto;
}
flex太强大。这样可以实现水平和垂直方向上同时居中
垂直居中
padding填充
这种方式必须知道父元素的高度以及元素本身的高度，或者使用css3的calc计算，限制比较多
line-height
适用于高度确定的单行文本，设置line-height=height
table
需要搭配vertical-align属性使用，不需要定高，会根据元素内容动态增加高度，但是只兼容IE8及以上的浏览器 {% jsfiddle hangbale/8ko2sLsw html,css,result %}
position
原理上和绝对定位水平居中一样，两者组合可以实现水平和垂直同时居中 {% jsfiddle hangbale/17axt2np html,css,result %}
这里是使用的translate，适用于不知道不定宽高的元素，如果设置了宽高，可以使用负边距
flex
原理同水平居中，不再赘述
多列
在实现栅格系统的时候，就会用到多列布局。实现方式包括
- 浮动 Bootstrap的栅格系统就是使用的浮动。兼容性好
- table 难以控制样式
- inline-block 块与块之间会产生空隙，需要清除(可使用font-size:0)
页脚固定在底部
这个问题很常见，会有两种情况，内容区域不能完全撑开body以及内容区域完全撑开body。 如果使用position的话不能满足内容区域完全撑开body的情况。比较合适的方法是使用单独的DIV为内容区域占位 {% jsfiddle hangbale/yep4z3v7 html,css,result %}
这个方法还有好几种变形，从原理上来说都差不多，首先设置body高度100%，这是为了方便占位元素设置最小高度100%；从而满足内容区域不能完全撑开body的情况，然后需要把footer用负边距拉回。
还可以使用flex
{% jsfiddle hangbale/k0w56unn html,css,result %}