深入理解css之float

2022-08-05 12:51:22 字數 2378 閱讀 5946

在css中,是存在流的概念的。在正常情況下,頁面總是從左到右,從上到下佈局,這種被稱為正常的流。但是有很多情況,正常流是沒辦法實現的,因此我們需要一些手段來破壞流,從而實現一些特殊的佈局,而本節的主角float就具備破壞流的特性。

很多新手在佈局的時候,總喜歡用float來實現。例如一個三欄佈局,左右固定,中間自適應,有些人會通過float來一列一列把它們砌起來。這樣的佈局極其容易崩潰,只要高度或者寬度稍微有些變化,整個頁面都會錯亂。因此float設計的初衷並不是用來佈局的,其本意僅僅是實現文字環繞效果,即左浮動,文字環繞,如下圖所示:

.float 

.content

文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞

一個元素設定了float屬性,會表現出如下特性:

包裹性包裹性包含了包裹和自適應兩個特性。

包裹指的是一個浮動元素,如果子元素寬度足夠小,則浮動元素的寬度就是該子元素的寬度,如下所示:

.float
這是浮動元素的子元素

自適應指的是如果浮動元素的父元素有設定寬度,並且浮動元素的子元素寬度超出了父元素,則浮動元素的寬度最終表現為父元素的寬度,如下所示:

.father 

.float

這是浮動元素的子元素

塊狀格式化上下文

設定了float的元素,其display的最終值會表現為block或者table,具體轉換如下表:

設定值計算值

inline

block

inline-block

block

inline-table

table

table-row

block

table-row-group

block

table-column

block

table-column-group

block

table-cell

block

table-caption

block

table-header-group

block

table-footer-group

block

因此,設定了float的元素,下面的寫法是多餘的:

.float 

.float

格式化上下文屬於bfc的內容,此處先不展開。

破壞文件流

這是float最本質的特性,因此float設計的初衷就是破壞文件流。設定float的元素,會導致父元素高度塌陷,我們來看個例子:

.float
文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞

可以看到,父元素的高度為0,但這不是bug,而是float本身就是這樣設計的,因此只有讓父元素高度塌陷了,後面的元素才有機會浮上來。但是僅僅是這樣還是不可以形成環繞效果的,不然文字浮上來就只會覆蓋在上面。這裡面還隱藏著一個特性:

意思是說行框盒子和浮動元素不會發生重疊,因此,下面的文字浮上去之後才不會覆蓋在之上。即使我們給文字設定margin負值也不會起作用。

沒有margin合併

設定了float的元素,由於形成了bfc,因此也就沒有了margin合併。

我們先來看個例子:

.float
標題

連結

在標準瀏覽器下,“標題”和“連結”會在同一行展示,並且“連結”會浮動在右邊。但是如果“標題”非常長,一行放不下呢,“連結”是浮動在第一行還是第二行呢?答案是第二行,要想解釋這個,我們得先理解兩個概念,一個是“浮動錨點”,一個是“浮動參考”:

float元素的“浮動參考”是行框盒子,也就是float元素在當前“行框盒子”內定位,因此,上面的例子“連結”會在第二行展示。但是也有一種情況是,浮動元素前後並沒有內聯元素,因此也就不存在行框盒子,這時候就是“浮動錨點”在起作用。因為“浮動錨點”表現得像一個內聯元素,有內聯元素,自然就有行框盒子,只是這個盒子看不見也摸不著罷了。

前面文字環繞的例子,只要稍微改造一下就可以實現兩欄或多欄的自適應佈局,**如下:

.father 

.float

.content

文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞文字環繞

深入理解css之float

文字環繞效果 block formatting context 塊級格式化上下文 元素使用了float屬性之後,可以使該元素脫離標準流,浮動...

CSS深入理解之overflow

如果overflow x 和overflow y 的值相同,ze等同於overflow 重點 如果overflow x和overflow y的值不同,且其中一個屬性的值為visible,而另外一個為hidden,scroll,或者auto,那麼這個visible會被重置為auto。這也就是為什麼垂直...

深入理解CSS背景

背景色background接受所有合法的顏色,還可以接受一個使背景透明的關鍵字。關於顏色的設定請移步至此。背景顏色不能繼承。其預設值是tra...