首先要知道,div是一種塊級元素,在標準流中,塊級元素是自上而下排列並且新佔一行的,所以我們可以看到在這裡不論div的寬度設定為多小都會新開一行排列.
在實際的頁面編寫過程中很多時候需要在一行顯示多個塊級元素,這時候我們可以設定float屬性來讓乙個塊級元素脫離標準流從而讓其不在單獨佔一行
這裡我們綠色div設定float:left讓他左浮動,可以看到第二行現在有兩個色塊,並且本來200px的藍色div只顯示了一般,這是因為綠色div浮動脫離了標準流,他的顯示位置雖然不變,但是已經不在標準流中影響布局
此時紅色div和藍色div重新組成了新的標準流按照塊級元素的標準排列,而浮動的元素"浮"在了標準流上,將藍色div遮擋了一半
這裡我們對紅色和綠色都設定了左浮,可以看到,紅色和綠色div都脫離了標準流,而藍色div單獨成了新的標準流.
紅色和綠色現在在同一流上組成了新流.
這裡我們先去除紅色的浮動,並增加黃色300px的浮動div
可以看到,雖然黃色設定了左浮,但是並沒有和一樣設定了左浮的綠色一起重新組成新流,這是為什麼呢?
因為藍色並沒有設定浮動,黃色雖然設定了浮動,但是因為黃色在原本流中的位置就是藍色的下方,設定浮動後其顯示位置依然在這
50px
100px並設定左浮動
200px
300px並設定左浮
clear:left|right|none|both
通過設定clear屬性可以去除該div一側的浮動
這裡我們將兩個div都設定為左浮,此時他們在同一流並且在一行排列,但是如果我們還想讓綠色處於紅色下面怎麼辦呢?
值得注意的是
css的設定只會改變選擇元素的顯示,所以為了改變綠色的位置,我們要對綠色div設定clear:left此時對於綠色來說,紅色並不被他視為浮動,這樣綠色將會按照視紅色為標準流時進行布局,放在紅色下面
這裡我們增加乙個不設定浮動的300px藍色div,可以看出清除浮動是只對選擇的元素啟用的,藍色div還是將紅色和綠色都視為浮動,紅色和綠色依然不影響標準流的布局
元素浮動與清除浮動
我們知道，塊元素具有的特點是具有完整的盒模型和自己佔一行。當我們想讓多個塊元素同佔一行時，我們通常使用的方法除了利用display屬性之外，還可以利用float屬性，使其浮動，達到同佔一行的效果。float 屬性定義元素在哪個方向浮動。以往這個屬性總應用於影象，使文字圍繞在影象周圍，不過在 css ...
CSS 塊級元素不清除浮動導致相鄰元素不居中顯示
在一次頁面製作的時候，發生了一件匪夷所思的事情，使用css的text align center 屬性企圖讓元素內文字水平居中，但是如圖設定後文字並沒有完全居中，然後無論怎麼修改都無法使其水平居中 經過一行行查詢，發現相鄰元素的行高linge height竟然可以影響到本元素，如圖 修改後 可見取消相...
清除浮動塊
bfc稱為塊級格式化上下文，就是說原來的屬性被格式化後，它變成了乙個獨立的塊，這個塊裡面的元素怎麼樣都和這個bfc沒什麼關係了 而當塊裡的元素浮動了，那麼它就是脫離文件流的 所以，bfc就是為了讓自己不脫離文件流，回到原來的正軌。overflow hidden這個css的目的是將一般的塊變成了乙個b...