CSS浮動

1. 浮動

浮動(float)這個名字實際上是來自於Netscape DevEdge網頁『Extensions to HTML 2.0』上的一段說明： 以往只能浮動影像，但CSS能讓你浮動任何元素，從影像到段落到列表，在CSS裡，這個功能是透過float屬性完成的。

 

float

• 數值： left | right | none
• 初始值： none
• 適用於： 所有元素

例如在下列原始碼前面和後面各加入文字，就會輸出下列文繞圖的畫面：

<img src="leaf.jpg" style="float: left;" alt="leaf">

浮動元素

浮動元素會從文件裡的一般流向裡移除，但是仍然會影響排版的結果。在CSS裡比較特別地方，在於浮動元素存在自己的平面上， 但仍會影響文件的其他部份。這樣的影響來自於當元素浮動時，其他內容會『圍繞四周』，正是大家所熟悉的浮動影像的行為。

例如：讓文字段落向右浮動的CSS寫法，瀏覽器呈現如下方所示：

p.aside {
    float: right;
    width: 200px;
    border: 1px solid;
    margin: 1rem 0 1rem 1rem;
    padding: 5px
}                        

完全不浮動

除了left與right之外，float還能夠設定為none，float: none用來避免元素產生任何浮動。聽起來怪怪的，既然不要浮動就不要宣告float ，為何還要float: none多此一舉呢？

假設在伺服器設定全域的浮動影像樣式，在茂些特殊的頁面上，你不想讓影像產生任何浮動，除了重寫整個樣式表之外，可以在文件的內嵌樣式 表裡，加上 img{float: none}，除了這種情況之外，並沒有太多用到float:none的機會。

2. 浮動的九項原則

向左浮動元素的左邊界外側最遠只能到容器區塊的左邊界內側。同樣的，向右浮動元素最遠也只能到容器區塊的右邊界內側。除非較晚出現元素的上緣在較早出現元素下緣的下方。 同樣的，浮動元素的右外側邊界一定要在文件原始碼裡更早出現的向右浮動元素 的左外側邊界的左方，除非較晚出現元素的上緣在較早出現元素下緣的下方。 同理，向右浮動元素的左外側邊界不能在它左方所有向左浮動的右外側邊界的左方。若浮動元素在兩個重疊的邊界範圍間，則浮動元素的放置位置會如同有個區塊級親代元素，且位於兩個邊界重疊的元素之間。

假設段落中有一浮動影像，這個影像的上緣必須放在包含影像的行方框的上緣。

同樣的，右側還有其他浮動元素的向右浮動元素，其左外側邊界也不能超出容器元素的左側邊。

圖1：浮動向左或向右

圖2：避免浮動元素重疊

圖3：避免重疊

圖4：浮動元素不是氣球，不能一直往上飄

圖5：浮動元素低於之前的浮動元素

圖6：浮動元素與所在的情境脈絡切平

圖7：若是空間不夠，浮動元素會被推到下一行

圖8：在其他的限制條件上，盡可能的往上移

圖9：盡可能往左或往右放置

1. 浮動元素的左（或右）外緣不能是容器區塊的左（或右）內緣。
2. 浮動元素的左外側邊界必須要在文件原始碼中前一個向左浮動元素的右外側邊界的右邊
3. 向左浮動元素的右外側邊界不能在它右方所有向右浮動元素的左外側邊界的右方
4. 浮動元素的上緣不能比親代元素的內側上緣高
5. 浮動元素的上緣不能高於其他更早出現的浮動元素或區塊級元素的上緣
6. 浮動元素的上緣不能高於包含文件原始檔中更早出現的元素方框的行方框上緣
7. 左側還有其他浮動元素的向左浮動元素，其右外側邊界不能超出容器區塊的右外側邊
8. 浮動元素必須盡可能的往上方放置
9. 向左浮動元素必須盡可能往左側移，向右浮動元素應該進可能往右側移，較高的位置優先於更向左或向右的位置

3. Clearing

並不是所有的情況都會想讓內容流過浮動元素，在某些情況下，你會想要避免這樣的行為，要是文件分為不同章節， 可能不會想讓浮動元素從一個章節凸出到另一個章節。在這樣的情況下，會想要設定每個章節的第一個元素禁止任何 浮動元素出現在它旁邊。這時候，就需要用到clear這個屬性。

clear

• 數值： left | right | both | none
• 初始值： none
• 適用於：區塊級元素

清除左側

如果章節的開頭標題為h2，那麼要所有的h2元素都不會被放置在浮動元素的右側，可以做如下的宣告：

h2 {clear: left;}

清除兩側

為了確保h2元素不會與任何浮動元素出現在同一行，可以使用both值

h2 {clear: both;}

完全不清除

若要許h2元素兩側出現浮動元素，可以使用none值

h2 {clear: none;}