float脱离文档流及两个特性
2015-09-07 本文已影响1315人
歇歇
文档流简介
文档流是文档中可显示对象在排列时所占用的位置。窃以为可以把窗口看作是高度为1px，宽度为显示器宽度的行组成（所以1366x768 px就是768行组成的），可显示的对象就像是word里面的文字，占满一行才会占用下一行的空间，当然对象的高度普遍大于1px，所以会同时占据多个最小行。
脱离文档流
绝对定位position：absolute;
固定定位position:fixed;
浮动float
都会脱离文档流，但float比较难理解，所以我们重点说float,请看一下代码和运行效果：
<!DOCTYPE html>
<html>
<head>
<style>
div.container
{
width:30em;
border:1px solid;
padding:1px;
}
div.box
{
width:100px;
border:1px solid red;
float:left;
}
div.box1
{
margin-left:10px;
border:1px solid green;
}
</style>
</head>
<body>
<div class="container">
<div class="box">float脱离<br>float</div>
<div class="box1">看，单以文字来说，float并未脱离文档流，但是box1块级元素的位置又是说明其脱离了文档流</div>
</div>
</body>
</html>
下面是运行结果，你们也可复制了代码去自行测试：
运行结果
所以这里我们把文字会认为float元素未脱离文档流当作是float的特性一；但其实它是脱离了文档流的，可以看见它也不能把父元素撑开
第二段代码，知识修改了$(".box")与$(".box1")的上下位置，却发现不同的效果：
<body>
<div class="container">
<div class="box1">看，单以文字来说，float并未脱离文档流，但是box1块级元素的位置又是说明其脱离了文档流</div>
<div class="box">float脱离<br>float</div>//这个div之前在$(".box1")的上方
</div>
</body>
下面是运行结果，你们也可复制了代码去自行测试：
运行结果
这里可以看到float的第二个特性，对于非文字对象,它相当于
positon:absolute;left:0;(或则是right:0;)，且默认其父元素设置了position:relative;&&默认对在其之上的兄弟元素设置了float。
也就是说它脱离了文档流，但是还是在其父容器中，而position:absolute;在不为父容器设置position的情况下，是相对于window对象进行偏移的。
注意：以上两个特性是自己闲来时总结的，并无官方文档支持，有不对的地方请大家指正，谢谢。
