第四章 盒子的浮動與定位
4.1 盒子的浮動
在標准流中，一個塊級元素在水平方向會自動伸張，直到包含它的元素的邊界；而在豎直方向和兄弟元素依次排列，不能並排。使用“浮動”方式後，塊級元素就可以並排了。
CSS中的float屬性，默認為none。就是標准流通常的情況。 如果將float屬性的值設置為left或right，元素就會向其父元素的左側或右側靠緊。同時默認情況下，盒子的寬度不再伸張，而是根據盒子裡面的內容的寬度來確定。
4.1.1 准備代碼
對浮動的解決方法，用clear清除浮動
clear屬性有 left、right、both。同時消除左右兩邊的影響。
對div設置浮動後，會導致父div沒有高度，只有border和 padding 的值，因為浮動後就不在標准流中。 可使用以下幾種方式解決：
· 在子div後增加一個<div style="clear:both"></div>
` 或者設置父div的高度。
4.2 盒子的定位
position屬性可以設置為4個屬性值之一：
1. static： 這是默認的屬性值，也就是該盒子按照標准流（包括浮動方式）進行布局；
2. relative：稱為相對定位，使用相對定位的盒子的位置常以標准流的排版方式為基礎，然後使盒子相對於它在原本的標准位置偏移指定的距離。相對定位的盒子仍在標准流中，它後面的盒子仍以標准流方式對待它。
3. absolute：絕對定位，盒子的位置以它的包含框為基准進行偏移。絕對定位的盒子從標准流中脫離。這以為著它們對其後的兄弟盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。
4. fixed：稱為固定定位，它和絕對定位類似，只是以浏覽器窗口為基准進行定位，也就是當拖動浏覽器窗口的滾動條時，依然保持對象位置不變。
4.2.1 static（靜態定位）