深入理解css之float

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

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

.float 

.content 

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

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

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

.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 

破壞文件流

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

.float

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

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

沒有margin合併

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

我們先來看個例子：

.float

標題

鏈結

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

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

.father 

.float 
.content 

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

CSS深入理解之float

float 屬性定義元素在哪個方向浮動。產生之初這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css 中，任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。如果浮動非替換元素，則要指定乙個明確的寬度 否則，它們會盡可能地窄。讓設定的標籤產生浮動效果，就是脫離原來頁面的標準輸...

深入理解css之float

文字環繞效果 block formatting context 塊級格式化上下文 元素使用了float屬性之後，可以使該元素脫離標準流，浮動在其他元素之上，不再佔據原本的空間，會導致後面的元素上移並占用該元素原本的空間。float屬性僅對使用該屬性的元素本身以及後面的元素產生影響 後面元素會上移 頁...

學習筆記 CSS深入理解之float

張鑫旭的css深入理解之float浮動學習筆記float為產生文字環繞效果而生 包裹 即產生乙個bfc 破壞 使父容器塌陷，元素脫離文件流，產生inline boxes環繞 方式一 使用clear，類似於產生乙個連線索道，使前文和後文關聯，會產生margin重疊效果。方式二 父容器bfc或者hasl...