标准流：
从左到右，从上到下块级元素独占一行，行内元素碰到父盒子边缘换行
浮动：
特点
1 元素浮动之后不占据原来的位置（脱标），变成立体，下面可以有东西，只影响下面的
2 浮动的盒子在一行上显示
3 行内元素浮动之后转换为行内块元素（可以定义宽高）。（不推荐使用，转行内元素最好使用display: inline-block;）
作用
文本绕图：文字到图片的右边
制作导航
网页布局
清除浮动：
1 给浮动的盒子加父盒子，并且设置高度
2 额外标签法：再最后一个浮动的盒子后加 <div id="" style="clear: both;"></div>
3 给浮动的盒子的父盒子加 overflow：hidden（在解决父边框塌陷时用过） 相当于设置了父元素的高度，如果有子元素到了父元素的外面，此方法不适用
4 用伪元素清楚浮动：给父盒子加类（clearfix）推荐使用
.clearfix:after {
content: ".";
display: block;
height: 0;
line-height: 0;
visibility: hidden;
clear: both;
}
兼容IE浏览器
.clearfix {
zoom: 1;
}
与行内块元素区别：浮动可以设置左浮动和右浮动
定位：
方向：left right top bottom
static 静态定位
是默认值，相当于标准流
absolute 绝对定位
特点：
1 元素使用绝对定位之后不占据原来的位置（脱标）
2 元素使用绝对定位，位置是从浏览器出发。
3 嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子位置是从浏览器出发。
4 嵌套的盒子，父盒子使用定位，子盒子绝对定位，子盒子位置是从父元素位置出发。
5 给行内元素使用绝对定位之后，转换为行内块（可以设置宽高）。（不推荐使用，推荐使用display:inline-block;）
relative 相对定位
特点：
1 使用相对定位，位置从自身出发。
2 还占据原来的位置。
3 子绝父相（父元素相对定位，子元素绝对定位）（父元素占据位置，子元素随意浮动）
4 行内元素使用相对定位不能转行内块
fixed 固定定位
特点：
1 固定定位之后，不占据原来的位置（脱标）
2 元素使用固定定位之后，位置从浏览器出发。
3 元素使用固定定位之后，会转化为行内块（不推荐，推荐使用display:inline-block;）