浮动、定位

1、文档流的概念指什么？有哪种方式可以让元素脱离文档流?

文档流（normal flow）是文档中可显示对象在排列时所占用的位置，我理解的是浏览器默认的输出DOM的方式按自上而下，从左往右的顺序排列（不一定对哈~）。常见的就是块级元素和内链元素，块级元素只要出现就会霸道的占据一整行，而内链元素往往是只要右边还有余位，便会安心的占据。
脱离文档流一般有3种方式：float,positon:absolute,position:fixed。
有一点值得注意的是，文本在遇到float时会环绕着float；而遇到positon:absolute时，将无视它与之重叠排列。

2、有几种定位方式，分别是如何实现定位的，使用场景如何？

position:static：默认值，即正常的文档流形式；

正常的文档流

position:absolute：绝对定位，相对于有定位方法（除了static定位）的第一个祖先元素进行定位，若无定位的祖先元素则是相对于<html>进行定位，该定位方法脱离文档流；

拥有相对定位的wraps作为祖先元素

无相对定位的wraps，祖先元素为html

position:relative相对定位，相对于自己本身的定位方法，并未脱离文档流；

原来的位置依然未被占据

position:fixed我把它叫做牛皮鲜定位，相对于浏览器进行定位，它永远固定出现在浏览器中的某个位置。

我在这

你若不离不弃，我必生死相依

至于最终选取什么样的定位方式，那就得具体情况具体分析了。

3、absolute, relative, fixed偏移的参考点分别是什么？

其实第2题已经做出了解答：

absolute参考的是离自己最近的、拥有定位（除了static）方式的祖先元素。若没有的话就是<html>;
relative参考的是自身原本的位置；
fixed参考的是<html>。

4、z-index 有什么作用? 如何使用?

关于z-index其实很好理解，作为机械专业的学生，必须秀一波我卓越的画图技术了（尼玛快忘完了，凑合着看吧）：
我们假设有3个文档层，设置绿色层z-index:1;黄色层z-index:2;红色层为默认的0,然后定位时移动至下图模样

我们在网页中看到的布局

实际上被分成了三层：

看的更直观一点应该是这样：

显然，在网页布局中，我们能够看到的是黄色图层所呈现的所有元素，以及少量未被遮挡部分的红色元素以及绿色元素（大家其实都在，只是有些被遮挡了），通过这种方式我们可以用z-index画出很多图形，或是实现更加灵活的排版布局。记住一点，z-index数字越大，元素越靠上层。

5、position:relative和负margin都可以使元素位置发生偏移，二者有什么区别？

margin会改变其他元素的位置，而position:relative不会。

6、如何让一个固定宽高的元素在页面上垂直水平居中?

老办法：

CSS3新办法：

7、浮动元素有什么特征？对其他浮动元素、普通元素、文字分别有什么影响?

浮动元素脱离了文档流，浮动模型是一种可视化格式模型，浮动的框可以左右移动（根据float属性值而定），直到它的外边缘碰到包含框或者另一个浮动元素的框的边缘。

对其他浮动元素的影响

字丑勿喷

对普通元素的影响
直接凌驾于其它元素之上，其实也是其它元素不鸟它
对文字的影响
文字环绕在其周围

8、清除浮动指什么? 如何清除浮动?

清除浮动用于本元素希望消去前面元素因为浮动所带来的布局影响。

如上图所示，3未浮动，1，2先后分别float:right,此时对3分别使用clear:both，clear:left，clear:right，结果如下：

clear:both

clear:left

clear:right

显然，float:left不对清除浮动有效果。

现在让3向左浮动，并添加box4，由于1,2,3都脱离了文档流，自然4占据了左上角：

现在分别对4进行：clear:both，clear:left，clear:right，结果如下：