有關CSS浮動和定位定義和用法介紹

一、浮動

1.浮動元素

1.對於浮動元素，有幾點需要記住：
首先，會以某種方式將浮動元素從文檔的正常流中刪除，不過他還是會影響布局；
2.採取css的特有方式，浮動元素幾乎“集自成一派”，不過他們還是對文檔的其餘部分有影響；
3.當一個元素浮動時，其他元素會“環繞”該元素。浮動元素周圍的外邊距不會合并。
4.不浮動：float:none用於防止元素浮動。

2.浮動的詳細內幕

在詳細瞭解浮動的內容之前，首先我們要知道什麼是包含塊。
浮動元素的包含塊時是其最近的塊級祖先元素。
css提供了一系列的規則來控制浮動元素的擺放：

• 浮動元素的左(或右)外邊界不能超出其包含塊的左(或右)內邊界；

• 浮動元素的左(或右)外邊界必須是來源文件中之前出現的左浮動(或右浮動)元素的右(或左)外邊界，除非後出現浮動元素的頂端在先出現浮動元素的底端下面。

• 左浮動元素的右外邊界不會在其右邊右浮動元素的做外邊界的右邊。

• 一個浮動元素的頂端不能比其父元素的內頂端更高；

• 浮動元素的頂端不能比之前所有的浮動元素或區塊層級元素的頂端更高。

• 如果來源文件中一個浮動元素之前出現另一個元素，浮動元素的頂端不能比包含該元素所產生框的任何行框的頂端更高

• 左（或右）浮動元素的左邊（右邊）有另一個浮動元素，前者的右外邊界不能在其包含塊的右（左）邊界的右邊（左邊）

• 浮動元素必須儘可能高的放置

• 左浮動元素必須向左進儘可能遠，右浮動元素則必須向右儘可能遠。

3.實用行為

首先，我們來看一下浮動元素比其父元素高時會有什麼結果。
css2.1澄清了浮動元素行為的一個方面：浮動元素會延伸，從而包含其所有後代浮動元素。所以，通過將父元素置為浮動元素，就可以把浮動元素包含在其父元素內。

4.負外邊距

負外邊距可能導致浮動元素移到其父元素的外面。通過設定負外邊距，元素可能看上去比其父元素更寬，同樣的道理，浮動元素也可能超過其父元素。
看上去，這個規則好像是和前面的相矛盾(浮動元素放在其父元素之外了)；
但是仔細研究一下上一節的規則就可以發現，這個在技術上其實是允許的，一個浮動元素的外邊界必須在父元素內，不過由於外邊距為負，放置浮動元素的內容時就好像覆蓋了自己的外邊界一樣。

5.浮動元素、內容和重疊

還有一個有趣的問題，如果一個浮動元素與正常流中的內容發生重疊會怎麼樣？
css2.1指定以下規則：

• 行內框與一個浮動元素重疊時，其邊框，背景和內容都在浮動元素“之上”顯示。

• 塊框與一個浮動元素重疊時，其邊框和背景在該浮動元素“之下”顯示，而內容在浮動元素“之上”顯示。

6.清除

有時候，我們可能並不總是希望內容流過浮動元素，某些情況下，可能要特意避免這種行為。例如：
為了確保所有的h3元素不會放在左浮動元素的右邊，可以設定h3{clear:left;}。這可以理解為“確保一個h3的左邊沒有浮動映像”;

二、定位

1.基本概念

利用定位，可以準確的定義元素框相對於其正常位置應該出現在哪裡，或者相對於父元素、另一個元素設定瀏覽器視窗本身的位置。

2.定位的類型

• static（初始值）：
  元素框正常產生，區塊層級元素產生一個矩形框，作為文檔流的一部分，行內元素則會建立一個或多個行框，置於其父元素中。

• relative：
  元素框位移某個距離。元素仍保持其未定位前的形狀，他原本所佔的空間仍保留。

• absolute：
  元素框從文檔流完全刪除，並相對於其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中的所佔的空間會關閉，就好像該元素原來不存在一樣。元素定位後產生一個塊級框，而不論原來他在正常流中產生何種類型的框。

• fixed:
  元素框的表現類似於將position設定為absolute，不過其包含塊是視窗本身。

3.包含塊

對於浮動元素，其包含塊的定義為最近的塊級祖先元素。
對於定位，情況則比較複雜：
- “根項目”的包含塊(也稱初始包含塊)由使用者代理程式建立，在HTML中，根項目就是html元素，不過有些瀏覽器會使用body作為根項目。
- 對於一個非根項目，如果其position值是relative或static，包含塊則由最近的塊級框、表儲存格或行內塊祖先框的內容邊界過程。
- 對於一個非根項目，如果其position值是absolute，包含塊設定為最近的position值不是static的祖先元素。

4.位移屬性

上面我們介紹了三種定位機制使用了四種屬性來描述定位元素各邊相對於其包含塊的位移。我們將這四個屬性成為位移屬性，這對於完成定位是很重要的一部分。
- 對於top和bottom，相對於包含塊的高度
- 對於right和left，相對於包含塊的寬度
這些屬性描述了距離包含塊最近邊的位移，所以又得名offset。

5.寬度和高度

設定寬度和高度

如果想為定位元素指定一個特定的寬度，顯然要用width屬性，類似的，利用height，也可以為定位元素宣告特定的高度。

限制寬度和高度

可以使用min-width和min-height，為元素的內容區定義一個最小尺寸。
類似的，還可以使用屬性max-width和max-height來限制元素的尺寸。

6.內容溢出和剪裁

溢出

假設由於某種原因，一個元素固定為某個特定大小，但內容在元素中放不下，此時就可以利用overflow屬性控制這種情況；
- visible：
預設值，表明元素的內容在元素框之外也能看見。一般的，這會導致內容超出其自己的元素框，但不會改變框的形狀。
- hidden：
元素的內容會在元素框的邊界處裁剪，不會提供滾動介面使使用者訪問超出剪裁地區的內容；
- scroll：
元素的內容會在元素框的邊界處裁剪，但是會提供一個滾動機制供使用者使用。

7.內容剪裁

如果一個絕對位置元素的內容溢出其內容框，而且overflow設定為要求裁剪該內容，通過使用屬性clip可以改變剪裁地區的形狀。
clip:rect(top,right,bottom,left);

8.元素可見度

除了剪裁和溢出，還可以控制整個元素的可見度。
visibility:
- visible 可見的
- hidden 不可見的。
- collapse
- inherit
visibility：collapse 當在表格元素中使用時，此值可刪除一行或一列，但是它不會影響表格的布局。被行或列佔據的空間會留給其他內容使用。如果此值被用在其他的元素上，會呈現為 “hidden”。
visibility:hidden 當元素通過設定visibility處於“不可見”狀態時，元素還是會影響文檔的布局，就好像他還是可見一樣。換句話說，元素還在那裡，只是你看不見它。這與display:none有區別，後者不僅不可見。還會從文檔中刪除，所以對文檔布局沒有影響。

9.絕對位置

包含塊與絕對位置元素

元素絕對位置時，會從文檔流中完全刪除。然後相對於其包含塊定位。這說明，絕對位置的元素可能覆蓋其他元素，或者被其他元素覆蓋。
絕對位置元素的包含塊是最近的position值不為static的祖先元素，創作人員通常會選擇一個元素作為絕對位置元素的包含塊，將其position指定為relative而且沒有位移。

自動邊位移

元素的靜態位置一詞的大致含義是：元素在正常流中原本的位置。更確切的講，“頂端”靜態位置是從包含塊的上邊界到假想框的上外邊距邊界之間的距離。

10、非替換元素的放置和大小

一般地，元素的大小和位置取決於其包含塊。各個屬性的值也會有一些影響，不過最主要的還是其包含塊。

11.替換元素的放置與大小

非替換元素和替換元素的定位規則大不相同。這是因為替換元素有固有的高度和寬度，因此其大小不會改變。
確定替換元素位置和大小時，所涉及的行為用以下規則描述最為容易：
- 如果width設定為auto，width的實際使用值由元素內容的固有寬度決定。
- 在從左向右讀的語言中，如果left的值為auto，要把auto替換為靜態位置。從右向左同理；
- 如果left或right仍為auto，則將margin-left或margin-right的auto值替換為0；
- 如果此時margin-left和margin-right都還定義為auto，則將他們設定為相等的值，從而將元素在其包含塊中置中；
- 在此之後，如果只剩下一個auto值，則將其修改為等於等式的餘下部分。

12、Z軸上的放置

通過屬性z-index進行控制

13、固定定位

固定定位和絕對位置很類似，只不過固定元素的包含塊是視窗。固定定位時，元素會完全從文檔流中去除，不會有相對於文檔中任何部分的位置。

14、相對定位

理解起來最簡單的定位機制就是相對定位。採取這種機制時，將通過使用位移屬性移動定位元素。