文档流
-
概念
文档流是文档中可显示对象在排列时所占用的位置
行内元素从左到右，块级元素从上到下显示 -
脱离方式
浮动(float)
绝对定位(absolute)
固定定位(fixed)
定位方式
相对定位(relative)
生成相对定位的元素，元素没有脱离文档流，元素的位置相对于自己在文档流中原来的位置，元素位置偏移，后面其他元素位置不变 ，无论是否进行偏移，元素仍然占据原来的空间，偏移元素会导致它覆盖其它元素
使用场景：一般和absolute一起使用绝对定位(absolute)
生成绝对定位的元素，元素脱离文档流，相对于static定位以外最近的一个祖先（父）元素进行定位,如果没有则相对于原始的容器。元素的位置通过 left, top, right以及 bottom属性进行规定。
使用场景：一般和absolute一起使用固定定位(fixed)
生成绝对定位的元素，元素脱离文档流，相对于浏览器窗口进行定位。元素的位置通过 left, top, right以及 bottom属性进行规定。它的特点是不会随页面滚动而移动(很像绝对定位，但它不随着页面滚动而移动，绝对定位会移动)。可以通过z-index进行层次分级。
使用场景：导航元素，广告窗口
偏移参考点
-
absolute相对于 static 定位以外的第一个父元素进行定位 -
relative相对于其正常位置进行定位 -
fixed相对于浏览器窗口进行定位
z-index
- 作用对于定位元素（非static），z-index用来控制层叠元素的显示优先级
- 使用值越大，显示优先级越高
position:relative和负margin
-
position:relative初始位置不变，不会影响其他元素 - 负
margin会影响其他元素
固定宽高的元素 垂直水平居中
1 用position:absolute属性，使元素的左上角在页面上垂直居中
2 用负margin属性，使元素相对于自身位置偏移，把正中心移到左上角的位置
7 浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?
特征
1 元素浮动之后会从文档正常流中删除
2 元素设置浮动后，会尽向左或向右浮动，直到碰到父元素边框或其余浮动元素
3 任何元素设置浮动后都会变成块级元素
4 浮动元素不会互相重叠
5 如果没有足够空间，浮动元素会被挤到新的一行影响
其他浮动元素：会依次排在浮动元素的左边或右边，直到其父元素宽度不够，将会被挤到下一行
普通元素：其后的普通元素将会占据其原来位置
文字：会让出浮动元素的位置，形成环绕效果
8 清除浮动指什么? 如何清除浮动?
定义
清除浮动是指清除浮动所带来的影响，比如由于浮动，父元素无法撑起高度，影响与父元素同级的元素；与浮动元素同级的非浮动元素会紧随其后；若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响布局解决
通过clear属性
清除浮动并不是说让浮动元素回到文档流
清除浮动只会改变改元素自身的位置，并且只针对排在该元素前面的元素。目的是让自己的左边或者右边没有浮动元素举个例子
9 高度坍塌
定义
当没有指定高度的父元素中的子元素全部都浮动时，父元素中内部高度因为是普通流中的块元素撑起来的，所以这个时候父元素的高度会变成0.或者会有部分浮动元素的位置会超出父元素的高度之外。这种现象，叫做高度坍塌。解决
使用:after伪元素
原理是在浮动元素最末尾添加一个元素，如果该元素位于浮动元素后面，并且没有浮动，那么父元素的高度就会重新获取
