CSS入門系列（六）CSS的佈局
上一節我們說完盒子，光有盒子是不行的，我們還需要佈局，這一節開始我們來描述一下css的佈局。
目錄
1. 漂浮float
- none：默認不漂浮
- left：文本流向對象的右邊，注意是右邊，因爲對象固定在了左邊，所以文本只能在這個對象的右邊。
- right：文本流向對象的左邊，原理同上。
演示：
原圖
當我在div1的屬性中加入float時,盒子2就跑到盒子1的右邊了：
#div_1{
background-color:#F90;
float:left;
}2. 定位position
有四個值：
- static: 默認，無特殊定位；
- absolute: 絕對，脫離文檔流，使用left，right，top，bottom等屬性相對於其最近的一個具有定位設置的父對象進行絕對定位，如果沒有父對象，則依據body對象。
- relative： 對象不可層疊， 將依據left，right，top，bottom等屬性在正常文檔流中偏移位置。
首先演示一下absolute：
原始的網頁是這樣的：
代碼如下：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border:#09F solid 1px;
height:100px;
width:200px;
}
#div_1{
background-color:#F90;
}
#div_2{
background-color:#5F0;
}
#div_3{
background-color:#09F;
}
</style>
</head>
<body>
<div id="div_1">
這是盒子1
</div>
<div id="div_2">
這是盒子2
</div><div id="div_3">
這是盒子3
</div>
</body>我們在這個的基礎上做一個父類的盒子，然後移動，我們可以看到效果是，大盒子移動了，小盒子跟着大盒子。設置了大盒子是absolute，且他沒有父對象，所以是相對body移動的：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
div{
border:#09F solid 1px;
height:100px;
width:200px;
}
#div_0{
background-color:#F9F;
height:400px;
width:400px;
position:absolute;
top:100px;
left:100px;
}
#div_1{
background-color:#F90;
}
#div_2{
background-color:#5F0;
}
#div_3{
background-color:#09F;
}
</style>
</head>
<body>
<div id="div_0">
<div id="div_1">
這是盒子1
</div>
<div id="div_2">
這是盒子2
</div><div id="div_3">
這是盒子3
</div>
</div>
</body>這時候，我們設置盒子1，讓他相對大盒子移動：
改動的代碼爲：
#div_1{
background-color:#F90;
position:absolute;
top:100px;
left:100px;
}注意看，盒子1出文檔流後，盒子2填充了盒子1的位置了，這就是出文檔流的原因。這裏就用和relative區別開，如果設置relative，這裏盒子2就不會填充盒子1的位置，因爲盒子1沒出流。