說說標準——CSS核心可視化格式模型(visual formatting model)之八：float 特性以及浮動(Float)定位細則一

原創

2020-02-22 02:11

浮動特性非常有用，3大布局核心之一。雖然如此，它涉及內容過多，瀏覽器兼容性問題也很多。它的定位不僅涉及包含塊，還涉及到了行框，塊框，還有行內框等內容；並且，各瀏覽器對其的支持還有不少兼容性問題。因此，它既是美夢又是噩夢。
那麼，浮動產生的困惑緣何而生，又由何而滅呢？一切都由W3C標準來定奪吧……

float 特性
'float'

適用於哪些元素
可設置給任意元素，但只適用於生成非絕對定位框的元素。
例：

HTML code

<div style="width:500px; height:150px; border:1px solid green; position:relative;"> <div style="width:100px; height:100px; float:right; position:absolute; border:1px solid red;">absolute</div> <div style="width:100px; height:100px; float:right; position:relative; border:1px solid red;">relative</div> </div>

截圖：

可見，對於絕對定位的元素，浮動沒有任何效果。這也體現了浮動和絕對定位之間的一種平衡。
而且，用Firefox的Firebug查看，你會發現，對於絕對定位元素計算後的 “float” 值，是”none”，而不是”right”。Chrome中則是 right……

特值的含義
該屬性指定框應當向左右移動或者不移動。特性值有如下含義：
left
該元素產生一個向左浮動的塊框。內容在該框的右邊排列，就是上一篇帖子中所說的文字環繞，起點是框的頂部（會受'clear'屬性的影響）。
right
與left類似，框向右側浮動，內容在該框的左側排列，從頂部開始。
none
該框不浮動。

這個大家應該都比較清楚吧，不再浪費篇章舉例了。

浮動細則

1. 對於根元素的浮動，瀏覽器應該當作 none
根元素無所謂是否浮動，沒有實際意義。

2. 左浮動框的左外邊界(margin edge)不可以出現在它包含塊左邊界之左。對於右浮動的元素也有類似規則
以上的話，看起來有點繞眼……
是這麼個意思，左浮動元素的左 margin 最多緊貼包含塊的左邊界。注意，是margin edge，不是border edge也不是content edge。關於邊界 (edge) 見：說說標準——你真的瞭解盒子模型(box model)嗎？

HTML code

示意圖：

3. 如果當前框是左浮動框，並且在源文檔中存在更早生成的左浮動框，那麼對於任意這些先前的框，要麼當前框的左外邊出現在先前框的右外邊之右，要麼它的頂部必須在先前框的底部之下。對於向右浮動的框也有類似的規則。
也就是說，浮動元素的定位受先前生成的浮動框的影響。後面的浮動元素，需要緊挨着先前同向浮動元素的 margin 邊進行定位，如果空間不足，則折行，放置到它之前元素的下面。
例如：

HTML code

截圖：

如上圖中，把left2當作當前元素，那麼，它前面有left1生成的浮動框，所以，它會貼着left1的右 margin 邊排列。而到left3 的時候，剩餘的空間已經不能夠放置它了，所以，折行放置。

4. 左浮動框的右外邊不可以出現在它右側的任何右浮動框的左外邊之右。對於向右浮動的元素也有類似的規則。

注意，以上說的是右側，不是下側，此規則不包括左浮動框下面的右浮動框。就是說，同一行中的左浮動元素和有浮動元素不能夠有互相摺疊的現象。

HTML code

以上兩個浮動元素的包含塊寬度爲200px，無法在一行放置，所以，右浮動元素只好折行顯示了。
寬度設置成300px之後，則可以放到一行。

5. 浮動框的頂外邊不能高於它包含塊的頂部。當一個浮動框發生在兩個margin摺疊的中間時，浮動元素的定位好像它有另一個空的塊級父框位於常規流中。那個空父框的定位規則在margin 摺疊一節有說明。

第一句好理解，說的是頂邊不能超出包含塊，跟左邊右邊不能超出一個道理。
後面的規則是說，當浮動框處於兩個發生margin摺疊的地方時，會被當作被包含在一個空的塊框中，它上面和下面的margin會穿過它發生margin摺疊，當它不存在。

HTML code