文档流

文档流有三种：标准流，浮动流，定位流；标准流的层级最低，浮动流的层级第二，定位流的层级最高(可以使用z-index调整定位盒子的层级)。

定位：position

position：relative相对于自身原始位置进行定位 不脱离文档流

position：absolute以定位父级为原点进行定位 脱离文档流，若没有定位父级以document文档定位，绝对定位即使没有初始值，也一定要设置值left:0;top:0;

position：fixed以窗口左上角为原点定位，定位之后相对于窗口的位置始终不变 脱离文档流

脱离文档流的两点影响：

1.后面同父级元素会顶上来

2.父级元素检测不到脱离文档流的元素，从而导致父级高度无法由内容撑开

浮动:float

float 在css中，任何元素都可以浮动，浮动元素会生成一个块级框。

创建BFC
float的值不是none

position 的值不是static或者relative

display的值是inline-block,table-cell,flex,table-caption或者inline-flex

overflow的值不是visible

BFC定义了如下布局规则

-内部的块元素会在垂直方向，一个接一个地放置。
-块元素垂直方向的距离由margin决定。两个相邻块元素的垂直方向的margin会发生重叠。
-每个元素的左外边距，与包含块的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
-BFC的区域不会与float元素的区域重叠。
-BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
-计算BFC的高度时，浮动元素也参与计算