《相对定位》

相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
position: relative;
left: 30px;
top: 20px;
}

《绝对定位》

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
position: absolute;
left: 30px;
top: 20px;
}

解决高度塌陷

方法一：通过开启元素的BFC属性

（先解释一下什么是bfc吧，在w3c中每个元素都有一个隐藏的bfc【Block Formating Context，块级格式上下文】属性，默认为关闭）

开启BFC属性后元素的特性：

1.元素的垂直外边距不会和子元素的重合

2.开启BFC的元素不会被浮动的元素所覆盖

3.开启BFC的元素可以包含浮动的子元素

开启BFC的方法：1）设置该元素overflow属性为除去visible的属性值
2）设置元素的float
3）将元素设置为决对定位
4）将元素的display属性设置为:inline-block

方法二：增加一个div元素，通过清除浮动

方法三：通过:after伪类来解决，注意加上content:""的属性。