1. 盒子的浮動
在標准流中，一個塊級元素在水平方向會自動伸展，知道包含它的元素的邊接；而在豎直方向與相鄰元素依次排列，不能並排。
CSS中float屬性，默認為none。將float屬性的值設置為left或right，元素就會向其父元素的左側或右側靠緊。同時默認情況下，盒子的寬度不再伸展，而是根據盒子里面的內容的寬度來決定。
float: left;
可以使用clear來清除浮動：
clear: left | right | both;
2. 盒子的定位
在CSS中有一個position屬性，用來進行定位操作。position屬性可以設置為4個屬性值之一：
◊ static：默認的屬性值，該盒子按照標准流（包括浮動方式）進行布局；
◊ relative：相對定位，使用相對定位的盒子的位置常以標准流的排版方式為基礎，然后使盒子相對於它在原本的標准位置偏移指定的距離。相對定位的盒子仍在標准流中，它后面的盒子仍以標准流方式對待它。
◊ absolute：絕對定位，盒子的位置以它的包含框為基准進行偏移。絕對定位的盒子從標准流中脫離。它對其后的相鄰盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。
◊ fixed：固定定位，它和絕對定位類似，只是以瀏覽器窗口為基准進行定位，當拖動瀏覽器的滾動條時，依然保持對象位置不變。
2.1 static
static為默認值，表示塊保持在原本的位置上，不會有任何移動的效果。沒有設置任何position屬性相當於使用static方式。
2.2 relative
使用relative相對定位，除了將position屬性設置為relative之外，還需要指定一定的偏移量，水平方向通過left或者right屬性來指定，豎直方向通過top或bottom來指定。
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> .relative { position: relative; top: 20px; left: 20px; width: 500px; } </style> </head> <body> <div class="relative">Position相對偏移</div> </body> </html>
在上面的示例中，.relative若不設置width，則由於block元素會自動伸展到寬度與父元素相同，且加上left的20px，則在瀏覽器中預覽時，會出現橫向滾動條。
◊ 使用相對定位的盒子，會相對於它原本的位置，通過偏移指定的距離，到達新的位置。
◊ 使用相對定位的盒子仍在標准流中，它對父塊和兄弟盒子沒有任何影響。
2.3 absolute
示例：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { margin: 20px; font-size: 12px; } #container { background-color: #a0c8ff; border: 1px dashed #000000; padding: 15px; width: 300px; } #container div { background-color: #fff0ac; border: 1px solid #000000; padding: 10px; } #item-2 { } </style> </head> <body> <div id="container"> <div>Box-1</div> <div id="item-2">Box-2</div> <div>Box-3</div> </div> </body> </html>
預覽效果：
使用absolute定位，修改#item-2的CSS代碼：
#item-2 { position: absolute; top: 0; right: 0; }
預覽效果：
從預覽效果中可以看出，此時item-2的顯示范圍已經不在container中，不占用container所包含的空間。
修改#item-2的CSS代碼：
#item-2 { position: absolute; top: 10px; right: 10px; }
效果預覽：
修改了top和right的設置，，item-2顯示效果仍為以瀏覽器窗口為基准。
absolute定位並不是都只能以瀏覽器窗口為基准來定位的，修改container的CSS代碼：
#container { background-color: #a0c8ff; border: 1px dashed #000000; padding: 15px; width: 300px; position: relative; }
顯示效果預覽：
這時的效果偏移距離沒有變化，但是偏移的基准不再是瀏覽器窗口，而是container，即父div。
對於absolute定位的描述：
◊ 使用absolute定位的盒子以它的“最近”的一個“已經定位”的“祖先元素”為基准進行偏移。如果沒有已經定位的祖先元素，則以瀏覽器窗口為基准進行定位。
“已經定位”的含義是position屬性被設置，並且被設置為不是static的任意一種方式。
“最近”是指在這個節點的所有祖先節點中，距離該節點的層次最近的祖先節點，以距離最近的祖先節點作為定位基准。
◊ absolute定位的框從標准文檔流中脫離，對其后的相鄰其他盒子的定位沒有影響，其他的盒子就好像這個盒子不存在一樣。
2.4 fixed
fixed定位與absolute定位有些類似，區別在於定位的基准不是祖先元素，而是瀏覽器窗口或者其他顯示設備的窗口。當訪問者拖動瀏覽器窗口的滾動條時，固定定位的元素將保持相對瀏覽器窗口不變的位置。
示例：
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> body { font-size: 12px; margin: 0; padding: 0; } #tapbar { position: fixed; height: 30px; line-height: 30px; width: 100%; background-color: #f5f5f5; top:0; left:0; } #container { background-color: #a0c8ff; border: 1px dashed #000000; width:96%; margin:30px auto auto; height: 1500px; } #container div { background-color: #fff0ac; border: 1px solid #000000; padding: 10px; } </style> </head> <body> <div id="tapbar">固定定位欄</div> <div id="container"> <div>Box-1</div> <div>Box-2</div> <div>Box-3</div> </div> </body> </html>
效果預覽：
從預覽效果中可以看出，設置了fixed定位的topbar欄沒有隨着瀏覽器的下拉滾動而變動位置。
3. z-index空間位置
z-index屬性用於調整定位時重疊的上下位置，頁面為x-y軸，垂直於頁面的方向為z軸，z-index值大的頁面位於其值小的上方。
z-index屬性的值為整數，可以是正數也可以是負數。當塊被設置了position屬性時，該值便可以設置各塊之間的重疊高低關系。默認的z-index值為0，當兩個塊的z-index值一樣時，將保持原有的高低覆蓋關系。