一、定位
1、标准文档流
在HTML文档中，如无任何其他额外规定，元素默认按标准文档流排列，行内元素会一个接一个同行排列，直到排满本行后自动换行；块级元素每一个规定占一整行；每个元素会按其在文档中的位置按顺序排列，此为标准文档流。
2、浮动（float）
脱离标准文档流的一种方式，元素会脱离标准文档流，并尽可能的往浮动方向偏移，直到遇到包含它的元素边框或者其他浮动元素的边框。
3、定位（position）
1）静态定位（static）
默认值。
2）绝对定位（absolute）
绝对定位脱离标准文档流，并根据其父辈的第一个非static的元素定位。
3）固定定位（fixed）
固定定位脱离标准文档流，并根据窗口进行定位。
4）相对定位（relative）
相对定位，元素可以定义偏移，但当前元素的形状不改变，仍然保留原位置。
5）继承定位（inherit）
继承父辈的定位。（IE不支持）
二、BFC原理
1、BFC概念
BFC（block formatting context）块级格式化上下文，可以看成某个元素的特性或者渲染规则，拥有该特性的元素，其内部的元素布局状态不会影响到外部元素的布局状态，相当于该元素内部形成了一个独立的密闭空间
三、形成BFC的条件
- 浮动元素：float属性不为none的元素。
- 定位元素：position属性为absolute或者fixed的元素。
- display元素：display属性为inline-block，table-cells，flex。
- overflow元素：overflow属性为auto，hidden，scroll。
四、BFC的作用
- 消除外边距重叠
<div class="box">
<div class="box1"></div>
<div class="box2"></div>
</div> .box1 {
width: 100px;
height: 100px;
margin-bottom: 100px;
background-color: red;
}
.box2 {
width: 100px;
height: 100px;
margin-top: 100px;
background-color: green;
}
这里我们设置红色盒子下外边距和绿色盒子上外边距为100px，盒子高度也为100px，很明显，边距重叠了。BFC原理是让某一个拥有BFC特性的元素内部形成独立封闭的空间，现在我们只需要让其中一个盒子拥有BFC特性不就可以了吗，随便加上一个可以形成BFC特性的属性，
position: absolute;
overflow: hidden;
float: left;
display: inline-block;以上四中随便一种或者可以形成BFC特性的属性，注意overflow要使用父盒子包裹该元素，在父盒子上使用该属性才行，渲染如下：
边距显示正常了。
2、清除浮动
当我们只给红盒子加上浮动，并且去掉margin属性，根据浮动的特性，红盒子会覆盖绿色盒子，只要给绿色盒子加上overflow：hidden就可以显示出来了，这也是overflow：hidden清除浮动的原理。