定位和清除浮动 10

本教程版权归凯旋和饥人谷所有，转载须说明来源

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

首先明确一点的是，W3C规范中没有document flow这个概念，只有normal-flow, 文档流的叫法主要还是多数中文译者的翻译方式问题。简单说就是元素按照其在 HTML 中的位置顺序决定排布的过程。即是将窗体自上而下分成一行行，并在每行中按从左至右的顺序排放元素并且这种过程遵循标准的描述。

position布局和float布局可以使元素脱离文档流；
normal-flow

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

值 描述
inherit 规定应该从父元素继承 position 属性的值。
static 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
relative 生成相对定位的元素，相对于其正常位置进行定位。因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

浮动
background-position
定位
定位参考
定位形式

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

relative元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
absolute位置是相对于距离他最近的非static祖先元素位置决定的，如果节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移
fixed 设置了固定定位之后，元素相对的偏移的参考是可视窗口，即使页面滚动，元素仍然会在固定位置,即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。
参考点

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

z-index属性设置一个定位元素沿Z轴的位置，Z轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。Z-index仅能在定位元素上奏效
默认都是z-index：0；数值越大，层级优先级越高。参考
参考2

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

position：relative，脱离文档流可以使元素发生偏移，但是在文档流中，它仍然占据着原来的位置，所以其他元素的位置不会发生变化。
负margin：通过负margin进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间，所以其他元素的位置发生了变化。
简单来说：position不会对文档流产生影响，他在文档流占的位置不变
margin改变文档流的位置，会影响后面的文档
参考点

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

div{ 
position:absolute;
 left:50%;
 top:50; 
margin-left:-width的一半; 
margin-top:-height的一半;
}

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

float被设计出来的初衷是用于文字环绕效果，即对一个图片使用float之后，它周围的文字会环绕着它。后来网页慢慢的发展，我们使用它来进行排版和布局
浮动元素不占据空间，左右移动知道碰到包含框的边缘或浮动框；
float会使元素脱离文档流，普通元素会填充其原来的位置
用float之后的元素会变为块元素
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止
对其他浮动元素会按照浮动的顺序并排显示在文档中
float
浮动
浮动
float是如何工作的
float深入剖析

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

父容器并没有把浮动的子元素包围起来，俗称塌陷，为了消除这种现象采取的措施。清楚浮动也是指为了使周围元素不受浮动元素的影响，为浮动元素留出空间；

.clearfix:after{ 
content: ''; 
display: block; 
clear: both;
}

.clearfix{ *zoom: 1;}
fix{zoom:1;}
.fix:after{
display:block;
content:'clear';
clear:both;
line-height:0;
visibility:hidden;
}

在浮动的元素后面（同一层级），增加一个新标签，比如：

.clear{clean:both}
父亲元素设置display:inline-block;overflow:hidden/auto
使其形成 BFC

清除浮动.png

清除浮动。当然这样的话，就会增加无用的标签，使得html变得冗余。
清除浮动