HTML(浮動、定位(float、position))
float屬性
定義：元素在那個反向浮動。以往這個屬性總用於圖像，是文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。
如果浮動非替換元素，則要指定一個明確的寬度；否則，它們會盡可能地窄。
注釋：假如在一行之上只有極少的空間可供浮動元素，那么這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。
<!--浮動：只能向左浮動或向右浮動；但是依然依賴於HTML源代碼中，編寫HTML的順序-->
實例
把圖像向右浮動：
img
{
float:right;
}
| 值 | 描述 |
| left |
元素向左浮動。 |
| right | 元素向右浮動。 |
| none |
默認值。元素不浮動，並會顯示在其在文本中出現的位置。 |
| inherit | 規定應該從父元素繼承 float 屬性的值。 |
position 屬性規定元素的定位類型
這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什么類型。相對定位元素會相對於它在正常流中的默認位置偏移。
實例
定位 h2 元素：
h2
{
position:absolute;
left:100px;
top:150px;
}
可能的值
相對定位
2 <html> 3 <head> 4 <style type="text/css"> 5 h2.pos_left 6 { 7 position:relative; 8 left:-20px 9 } 10 h2.pos_right 11 { 12 position:relative; 13 left:20px 14 } 15 </style> 16 </head> 17 18 <body> 19 <h2>這是位於正常位置的標題</h2> 20 <h2 class="pos_left">這個標題相對於其正常位置向左移動</h2> 21 <h2 class="pos_right">這個標題相對於其正常位置向右移動</h2> 22 <p>相對定位會按照元素的原始位置對該元素進行移動。</p> 23 <p>樣式 "left:-20px" 從元素的原始左側位置減去 20 像素。</p> 24 <p>樣式 "left:20px" 向元素的原始左側位置增加 20 像素。</p> 25 </body> 26 27 </html>
絕對定位
1 <html> 2 <head> 3 <style type="text/css"> 4 h2.pos_abs 5 { 6 position:absolute; 7 /*相對於頁面的左上角；因為用的是：left（左邊），top（頂部）； 8 若使用的是：right（右邊）和bottom（底部）則是相對於頁面的右下角*/ 9 left:100px; 10 top:150px 11 } 12 </style> 13 </head> 14 15 <body> 16 <h2 class="pos_abs">這是帶有絕對定位的標題</h2> 17 <p>通過絕對定位，元素可以放置到頁面上的任何位置。下面的標題距離頁面左側 100px，距離頁面頂部 150px。</p> 18 </body> 19 20 </html>