脱离文档流分析
脱离文档流分析 --------------------------------------------(分享自http://www.cnblogs.com/shenfangfang/p/5278528.html)
先来了解一下block元素和inline元素在文档流中的排列方式。
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性。水平方向的padding-left, padding-right, margin-left, margin-right都产生边距效果；但竖直方向的padding-top, padding-bottom, margin-top, margin-bottom不会产生边距效果。
- 常见的块级元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
- 常见的内联元素有span、a、strong、em、label、input、select、textarea、img、br等
所谓的文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列。
脱离文档流，也就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文档流的元素不存在而进行定位。
只有绝对定位absolute和浮动float才会脱离文档流。
---部分无视和完全无视的区别？需要注意的是，使用float脱离文档流时，其他盒子会无视这个元素，但其他盒子内的文本依然会为这个元素让出位置，环绕在周围(可以说是部分无视)。而对于使用absolute position脱离文档流的元素，其他盒子与其他盒子内的文本都会无视它。(可以说是完全无视)
[1]浮动-定义：浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的浮动框之后的块框表现得就像浮动框不存在一样。（注意这里是块框而不是内联元素；浮动框只对它后面的元素造成影响）
问题1：浮动元素后跟block元素&浮动元素后跟inline元素对布局的影响
浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。如下第一个例子box2是浮动框，其后跟一个块元素；例子2是浮动框后跟一个内联元素。
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{width:100px;height:100px;}
#box2{background-color:green;width:100px;height:100px;float:left;}
#box3{background-color:red;width:200px;height:200px;}
</style>
</head>
<body>
<div id="box1">box1</div>
<div id="box2">box2 向左浮动</div>
<div id="box3">box3</div>
<!--<span id="box3">span3</span>-->
</bod
问题2：元素浮动造成的两个div覆盖或相互重叠如何解决。
（1）、左右结构div盒子重叠现象，一般是由于相邻两个DIV一个使用浮动一个没有使用浮动。如上面的例1：相邻的两个盒子box2向左浮动、box3未浮动。一个使用浮动一个没有导致DIV不是在同个“平面”上，但内容不会照成覆盖现象，只有DIV形成覆盖现象。
解决方法：要么都不使用浮动；要么都使用float浮动；要么对没有使用float浮动的DIV设置margin样式。如上面的例1中box2宽度是100，只需要对box3设置margin-left：102px就可以实现不重叠。
（2）、上下结构div盒子重叠现象
1 <head>
2 <meta charset="UTF-8">
3 <title></title>
4 <style type="text/css">
5 *{margin:0;padding:0;}
6 .container{border:1px solid red;width:300px;}
7 #box1{background-color:green;float:left;width:100px;height:100px;}
8 #box2{background-color:deeppink; float:right;width:100px;height:100px; }
9 #box3{background-color:pink;height:40px;}
10 </style>
11 </head>
12 <body>
13
14 <div class="container">
15 <div id="box1">box1 向左浮动</div>
16 <div id="box2">box2 向右浮动</div>
17 </div>
18 <div id="box3">box3</div>
19 </body>
例子如上：.container和box3的布局是上下结构，上图发现box3跑到了上面，与.container产生了重叠，但文本内容没有发生覆盖，只有div发生覆盖现象。这个原因是因为第一个大盒子里的子元素使用了浮动，脱离了文档流，导致.container没有被撑开。box3认为.container没有高度（未被撑开），因此跑上去了。
解决方法：
1、要么给.container设置固定高度，一般情况下文字内容不确定多少就不能设置固定高度，所以一般不能设置“.container”高度(当然能确定内容多高，这种情况下“..container是可以设置一个高度即可解决覆盖问题。
2、要么清除浮动。清除浮动后的效果如下：
2-1：使用css clear清除浮动，在.container盒子闭合前加clear样式清除浮动。
深入理解clear属性：
clear属性规定元素的哪一侧不允许出现浮动元素，他的语法如下：
clear语法：
clear : none | left | right | both
取值：
none : 默认值。允许两边都可以有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
both : 不允许有浮动对象
但是需要注意的是：clear属性只会对自身起作用，而不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象，即clear：right，则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
务必记住这句话：“float是魔鬼，会影响其他相邻元素；但是clear是小白，其只会影响自身，不会对其他相邻元素造成影响！”
例如：下图例3 box1向右侧浮动，box2不设置clear属性时的示意图；例4中box1向右侧浮动，box2设置clear：right，表示右侧不允许出现浮动元素，则box2自动下移一行。
同样的，如果是box1向左浮动，box2和box1则会出现重叠，如例5；但如果在box2中设置clear：left；表示左侧不允许出现浮动元素，则box2同样会下移。
但是为了计算方便：一般都会增加一个空div块，并使用clear：both来设定表示两侧都不允许有浮动元素。这样新的空div块会下移，达到撑开父元素的目的。
1 <head>
2 <meta charset="UTF-8">
3 <title>DIV 相互重叠</title>
4 <style type="text/css">
5 *{margin:0;padding:0;}
6 .container{border:1px solid red;width:300px;}
7 #box1{background-color:green;float:left;width:100px;height:100px;}
8 #box2{background-color:deeppink; float:right;width:100px;height:100px; }
9 #box3{background-color:pink;height:40px;}
10 .clear{clear:both;}
11 </style>
12 </head>
13 <body>
14
15 <div class="container">
16 <div id="box1">box1 向左浮动</div>
17 <div id="box2">box2 向右浮动</div>
18 <div class="clear"></div>
19 </div>
20 <div id="box3">box3</div>
21 </body>
2-2：给父元素设置overflow：hidden来清除浮动。
这里我们可以这样理解：overflow：hidden的含义是超出的部分要裁切隐藏，float的元素虽然不在普通流中，但是他是浮动在普通流之上的，可以把普通流元素+浮动元素想象成一个立方体。如果没有明确设定包含容器高度的情况下，它要计算内容的全部高度才能确定在什么位置hidden，这样浮动元素的高度就要被计算进去。这样包含容器就会被撑开，清除浮动。
1 <head>
2 <meta charset="UTF-8">
3 <title>DIV 相互重叠</title>
4 <style type="text/css">
5 *{margin:0;padding:0;}
6 .container{border:1px solid red;width:300px;overflow:hidden;}
7 #box1{background-color:green;float:left;width:100px;height:100px;}
8 #box2{background-color:deeppink; float:right;width:100px;height:100px; }
9 #box3{background-color:pink;height:40px;}
10 .clear{clear:both;}
11 </style>
12 </head>
13 <body>
14
15 <div class="container">
16 <div id="box1">box1 向左浮动</div>
17 <div id="box2">box2 向右浮动</div>
18 </div>
19 <div id="box3">box3</div>
20 </body>
[2]定位
分别分析一下position的几个值
（1）static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
（2）relative 相对定位。相对定位是相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。有趣的是，即使设定了元素的相对定位以及偏移值，元素还占有着原来的位置，即占据文档流空间。（这里的占据文档流指的是占据原来的位置，而不是占据相对定位后的位置。个人理解：相对定位后的元素则会叠加到新位置的上，覆盖原先新位置上的元素，但是在新位置上不实际占据空间）如下图所示，头像相对定位前在box1盒子下方，头像相对定位后，头像原来的位置空着，但是下方的带有文本的盒子并没有移动上来。
这是相对定位的一个主要用法，图文混排。
注意，标签中设置了position:relative;属性，不设置left，right和top，bottom的值，这些值则默认值为0。注意，即使不设置值同样起到了相对定位作用，其子孙级别标签使用position:absolute;时同样会起到定位效果，position：relative的另一个主要用法：方便绝对定位元素找到参照物。
（3）绝对定位
定义：设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。元素原先在正常文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
重点：如果父级设置了position属性，例如position:relative;，那么子元素就会以父级的左上角为原始点进行定位。这样能很好的解决自适应网站的标签偏离问题，即父级为自适应的，那我子元素就设置position:absolute;父元素设置position:relative;，然后Top、Right、Bottom、Left用百分比宽度表示。
总结：参照物用相对定位，子元素用绝对定位，并且保证相对定位参照物不会偏移即可。
绝对定位的层设好要参照位置的层后，就可以用TOP，LEFT这些来定位置了，如果它的上级或上上级都没定位的话只就会根据BODY的位置来定位了,还有最后一点，绝对定位是不占位置的，它会像PS的图层一样单独做一层，至于第几层你可以通过z-index:这个属性来设置。
另外要注意：仅使用margin属性布局绝对定位元素的情况
此情况，margin-bottom 和margin-right的值不再对文档流中的元素产生影响，因为该元素已经脱离了文档流。另外，不管它的祖先元素有没有定位，都是以文档流中原来所在的位置上偏移参照物。
图9中，使用margin属性布局相对定位元素。
层级关系为：
<div ——————————— position:relative;
<div—————————-没有设置为定位元素，不是参照物
<div———————-没有设置为定位元素，不是参照物
<div box1
<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
<div box3
效果图：
（4）fix定位
元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
