1、static定位(普通流定位) -------------- 默认定位
2、float定位(浮动定位) 例：float:left
有两个取值：left(左浮动)和right(右浮动)。浮动元素会在没有浮动元素的上方，效果上看是遮挡住了没有浮动的元素，有float样式规则的元素是脱离文档流的，它的父元素的高度并不能有它撑开。
如果父元素的宽度太窄，那么其他浮动元素会向下移动，直到有足够的空间（左图所示）；如果浮动元素的高度不同，那么其他浮动元素向下移动时，就有可能会出现卡住的情况（下图所示）
注意：浮动元素的外边缘不会超过父元素的内边缘；浮动元素不会上下浮动；浮动元素不会互相重叠，会像行内块元素一样排列。
如果想要既设置浮动，又使父元素的高度被浮动元素撑开，即清除子元素浮动对父元素带来的高度的影响，有四种方法可以实现：
假设HTML代码部分为：
<div class="parent">这是父元素
<div style="float:left">这是子元素</div>
</div>
1) 为父元素设置固定高度 -------------缺点：不知道具体高度没办法设置
CSS代码部分：
.parent{
//...
height:xxx//某个固定值
}
2) 在父元素内，在浮动元素的下方多写一行代码：<div style="clear:both"></div>------------- 缺点：增加代码冗余
HTML代码部分：
<div class="parent">这是父元素
<div style="float:left">这是子元素</div>
<div style="clear:both"></div>
</div>
3) 为父元素设置css规则：overflow:hidden ------------- 缺点：有时候不希望超出部分隐藏
.parent{
// ...
overflow:hidden //某个固定值
}
4) 内容生成 ------------- 最优的方法，推荐
CSS代码部分：
.parent:after{
content:''
display:'block'
clear:both
}
3、relative定位(相对定位) position:relative
相对本元素的左上角进行定位，top,left,bottom,right都可以有值。虽然经过定位后，位置可能会移动，但是本元素并没有脱离文档流，还占有原来的页面空间。可以设置z-index。使本元素相对于文档流中的元素，或者脱离文档流但是z-index的值比本元素的值要小的元素更加靠近用户的视线。
相对定位最大的作用是为了实现某个元素相对于本元素的左上角绝对定位，本元素需要设置position为relative。
4、absolute定位(绝对定位) position:absolute
相对于祖代中有relative(相对定位)并且离本元素层级关系上是最近的元素的左上角进行定位，如果在祖代元素中没有有relative定位的，就默认相对于body进行定位。
5、fixed定位（固定定位）position:fixed
相对于窗口的位置，而且不受其他网页内元素影响，永远处于浏览器窗口的相对位置。
绝对定位是脱离文档流的，与浮动定位是一样的效果，会压在非定位元素的上方。可以设置z-index属性。
注意：当同时有浮动元素和绝对定位元素出现并且浮动元素没有设置z-index，浮动元素是压在绝对定位元素上的，即离用户的视线更近。
CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。
在解释BFC之前，先说一下文档流。我们常说的文档流其实分为 定位流 、 浮动流 、 普通流 三种。而普通流其实就是指BFC中的FC。FC(Formatting Context)，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。
BFC (Block Formatting Context)块级格式化上下文，是用于布局块级盒子的一块渲染区域。[MDN上的解释]：BFC是Web页面 CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。
注意：一个BFC的范围包含创建该上下文元素的所有子元素，但 不包括 创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。
常规流(Normal flow)
浮动(Floats)
绝对定位(Absolute positioning)
注意： display:table也可以生成BFC的原因在于Table会默认生成一个匿名的table-cell，是这个匿名的table-cell生成了BFC。
浏览器对BFC区域的约束规则：
规则解读：
BFC是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，反之亦然。我们可以利用BFC的这个特性来做很多事。
一个正常文档流的block元素可能被一个float元素覆盖，挤占正常文档流，因此可以设置一个元素的float、display、position值等方式触发BFC，以阻止被浮动盒子覆盖。
[使用BFC阻止元素被浮动元素覆盖]点击预览
通过改变包含浮动子元素的父盒子的属性值，触发BFC，以此来包含子元素的浮动盒子。
[使用BFC包含浮动元素]
注意，这里触发BFC并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。
BFC内部其他形式脱离文档流(absolute fixed) 点击预览
有时候因为多列布局采用小数点位的width导致因为浏览器因为四舍五入造成的换行的情况，可以在最后一列触发BFC的形式来阻止换行的发生。比如下面栗子的特殊情况
使用BFC阻止多列布局最后一列换行 点击预览
属于同一个BFC的两个相邻块级子元素的上下margin会发生重叠，(设置writing-mode:tb-rl时，水平margin会发生重叠)。所以当两个相邻块级子元素分属于不同的BFC时可以阻止margin重叠。
这里给任一个相邻块级盒子的外面包一个div，通过改变此div的属性使两个原盒子分属于两个不同的BFC，以此来阻止margin重叠。
使用BFC阻止margin合并 点击预览
但是这里有个 疑问 点击预览 ：
如果外面包一层div，设置能触发BFC的任何属性都能阻止相邻元素的margin合并。因为分属不同BFC不会发生margin合并。
而如果在外面不包一个div的话，当设置display为inline-block、inline-flex、table-captain，和position为absolute、fixed，float为left、right是可以阻止margin合并的。这里问题来了：
我们知道设置position和float会让元素脱离文档流并且又创建新的BFC，所以两个元素就不是相邻元素了，因此可以阻止相邻元素margin合并，但是inline-block、inline-flex、inline-grid、table-captain为什么可以呢？如果有人知道为什么，请告知~
