Float && Position-Assignment

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

文档流（normal flow），也称为标准文档流、常规流、普通流等，是元素在html文档的定位方式之一，标准流的元素的位置由该元素在html中的位置所决定。主要表现形式是元素由上到下、由左到右依次排版布局。
总的来说，css的定位机制可分为：文档流、浮动和定位

文档流：包括块级元素的块级格式、行内元素的行内格式
浮动：浮动将元素从文档流中脱离出来，向左或向右浮动直至碰到另一元素的边框或边界才停止浮动；
定位
- 绝对定位：以父元素的左上角的顶点为参考点，进行定位，元素将脱离文档流
- 相对定位：元素相对于自身所处的原来位置进行定位，元素不脱离文档流(相对定位可以说是特殊的文档流)

综上所述，通过浮动和绝对定位机制都可使元素脱离文档流。

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

css的定位机制包括：文档流、浮动和定位

文档流
文档流是默认的定位方式，实现方式是直接在标签内写入内容，html会自动排版布局。
具体演示效果如下：

浮动
css浮动属性提供左浮或右浮两种属性值，元素的浮动规则是元素的边框浮动至包含框或另一个浮动框（必须是浮动着的元素）才停止，并且浮动元素将脱离文档流。
浮动的基本原理如下：

出现上述的情况是：
当某个div遇到浮动元素的时候，会产生同一个div下内容和包裹它的盒子的分离，而盒子的内容则会环绕在浮动元素周围，解决方法在后面会提及。

此时，3个方块都是浮动元素，方块2左浮遇到方块1这浮动元素停止左浮，方块3同理。

同样是3个方块左浮，但是如果一行的宽度不足以让某个浮动元素容纳，则它会自动左浮至下一行。

如果，方块1过于高的话，那么它会自动挡住方块3的左浮线路。
浮动本来是为实现文字环绕而诞生的，但是后来开发者常将它用于页面的布局

定位（position）
定位可分为static、absolute、relative和fixed，下面主要讲解absolute、relative和fixed。
- absolute是绝对定位，参考点是以已经定位的父元素的左上顶点

上图显示，方块2相对于已经定位的父元素实现绝对定位。

relative是相对定位，参考点是以元素所在的原来位置的左上顶点

上图显示，方块2相对于自己的原来位置发生 top:10px; left:10px;的移动

fixed，参考点是浏览器的页面视窗的左上顶点

以上三个三种定位方式，fixed常用来放置开发者希望用户一直在浏览器能看到的固定区块，relative和absolute常用来精心精确布局

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

absolute是绝对定位，参考点是以已经定位的父元素的左上顶点
relative是相对定位，参考点是以元素所在的原来位置的左上顶点
fixed，参考点是浏览器的页面视窗的左上顶点

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

z-index是设置元素的堆叠顺序，拥有高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
注意，这里所指的是堆叠顺序而不是z-index的值的大小，并且z-index 仅能在定位元素上奏效

堆叠顺序
- 不对元素设position时，文档流后面的元素覆盖前面的元素；
- 将元素设置的position设置为relative ，absolute 或者 fixed，元素会覆盖没有设置 position 属性或者属性值为 static 的元素
当存在3个元素


 A-1
B

A、B均没有设置position，但A的子元素A-1设置了，那么B会覆盖A，A-1会覆盖B

在不存在父子关系的4个元素中，z-index最大的覆盖其余3个，z-index为0的和没设置position的堆叠关系遵循先后顺序，z-index为负数的位于z-index：0的后面
存在父子关系情况下，子元素会继承父元素的堆叠关系
若所有元素都定义了 position:relative, 并且A 元素的 z-index 和 B 元素一样大, 但因为顺序规则, B 元素覆盖在 A 元素前面. 就算 A 的子元素z-index 值比 B 的子元素大, B 的子元素还是会覆盖在 A 的子元素前面。

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

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

 .box{
  background:lightgreen;
  width:100px;
  height:100px;
  position:absolute;
  top:50%;
  left:50%;
  margin-left:-50px;
  margin-top:-50px;
}
/* 左外边距和上外边距分别设置成宽高的一半 */

具体效果如下：

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

浮动元素的特征：

浮动元素将脱离文档流，不占据文档的空间
添加浮动属性且不设置宽高，内容会将撑开盒子，类似inline-block
设置宽高和float后，相当于悬浮的inline-block

浮动元素对其他元素的影响：
对浮动元素的影响，详见第2题浮动篇；
对普通元素的影响，普通元素会占据浮动元素原来所在的文档位置；
对文字而言，除了自身的文字外，其他元素中的文字一律环绕浮动元素周围；

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

清除浮动是指对浮动元素所产生的影响其他元素的浮动效果予以清除，以期达到开发者期望的布局。
针对浮动产生的问题，清除浮动可以分为两种：

浮动元素使得同级的非浮动元素紧随其后

可以在浮动元素中添加clear：left|right|both达到清除浮动,即不允许浮动元素的左侧、右侧或两侧出现其他浮动元素

如果子元素是包裹在自适应宽高的父元素中，那么一旦该子元素浮动，父元素的高度会“塌陷”，因为父元素的高度就是子元素的高度，浮动使得子元素脱离文档流，让父元素认为子元素“不存在”了

方法：在父元素中添加clearfix样式,设计思想就是在父元素前或后加入一个内容为空的盒子，并设置这个盒子具有clear属性，从而使得前面的浮动元素“无处可逃”
具体代码如下：

.clearfix{
  overflow:hidden;
  *zoom:1; /* for ie 6*/
}

或者

.clearfix:before, .clearfix:after
{ content: ""; display: table;}
.clearfix:after{ clear: both;}
.clearfix
{ *zoom: 1; /* for ie 6,7*/}

demo

9.代码

代码地址：github
写出如下两栏布局, 其中中间区块宽度900px, 居中,左侧边栏宽度200px, 右侧边栏宽度700px

ps: 图片左浮动，导航栏整体右浮动，导航栏里面的li元素左浮动。
ps: aside左浮动，main左浮动
凡是有浮动的地方，其直接父元素必须清除浮动

不使用背景图片实现如下效果

参考资料

css的定位机制
CSS 定位与文档流
CSS float浮动的深入研究、详解及拓展(一)
CSS float浮动的深入研究、详解及拓展(二)
css样式float造成的浮动“塌陷”问题的解决办法
z-index详解