本文总结了css脱离标准文档流的两种方式： 浮动 和 绝对定位。
一 . 浮动
当给元素设置float属性后，元素会脱离标准文档流尽量向左向右浮动，直到碰到包含框或另一个浮动边框为止。这里概念说的很模糊，下面举例来说明。
例一：
<body>
<div id="id1">id1</div>
<div id="id2">id2</div>
<div id="id3">id3</div>
<div id="id4">id4</div>
</body>标准文档流中div元素会从上到下排列：
1）给id2、id3元素css设置float：left，排列变为：
分析：id2、id3浮动后脱离了文档流。id4上移，与id1够成一个新的标准文档流。id2、id3漂浮于标准流之上，遮挡了id4。
浮动元素会和块元素重叠，但块盒子内容（文字、非块状元素img）会浮动在浮动元素周围，就像上面“id4”被挤了出来一样。
2）给id2、id4设置float：left，排列变为：
分析：区别于1）中id3浮动后跟随在id2后面，这次id4浮动后并没有跟随在id2后面。其实我们观察，id2一直浮动，但也并没有跟随id1，所以可以得到规律：浮动之前的元素不会受到浮动的影响。如果浮动元素的前一个元素也是浮动的，则会跟随（一行放不下会挤到下一行）；如果前一个元素是标准流中的元素，则浮动元素的相对垂直位置不会变化，只会在自己所在行中左右浮动。就像本例中，id3是标准流中元素，id4不会跟随id2（不是相邻元素）或者id3。
例二：
来看一个稍复杂的例子。
<body>
<div class="parent">
<div class="box">float元素</div>
<p>孟子曰：“君子有三乐，而王天下不与存焉。父母俱存，兄弟无故①，一乐也；仰不愧于天，俯不怍②于人，二乐也；得天下英才而教育之，三乐也。孟子曰：“君子有三乐，而王天下不与存焉。父母俱存，兄弟无故①，一乐也；仰不愧于天，俯不怍②于人，二乐也；得天下英才而教育之，三乐也。</p>
<div class="box">float元素</div>
<div class="behind"></div>
<div class="box">float元素</div>
</div>
</body>.parent{
width:380px;
background-color:rgb(25, 132, 199);
}
.box{
width: 120px;
height: 100px;
float: left;
background-color: rgb(25, 199, 185);
}
.behind{
width: 150px;
height: 120px;
background-color: black;
}
分析： 上图揭示了浮动导致的三大问题：
a）父元素塌陷：父元素parent没有被自浮动元素撑开，高度受<p>和<div class="behind">控制。
b）浮动元素和块元素重叠。
c）文字、非块状元素浮动在浮动元素周围。
注意，浮动元素想通过设置z-index改变层叠关系是无效的。
二. 绝对定位
元素默认position是static，一旦设置成absolute、relative、fixed元素就要“浮起来”了，但relative会保留原来的空间。元素一旦“浮起来”，z-index属性就会被激活，通常是一个大于0的整数才能覆盖原来的文档流。
2966
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
