浮動與清除浮動

2022-08-24 03:27:09 字數 1040 閱讀 3535

float 屬性定義元素在哪個方向浮動,可能的值有left、right、none、inherit。以往這個屬性總應用於影象,使文字圍繞在影象周圍。

例:

出現在文字的右邊,並被文字環繞。不過在 css 中,任何元素都可以浮動。浮動元素會生成乙個塊級框,而不論它本身是何種元素。如果浮動非替換元素,則要指定乙個明確的寬度;否則,它們會盡可能地窄。假如在一行之上只有極少的空間可供浮動元素,那麼這個元素會跳至下一行,這個過程會持續到某一行擁有足夠的空間為止。

但是需要注意的是,設定了float的元素會脫離文件流,不具有高度值,即出現高度坍塌的現象。若給上述最外層的div加上背景色,則 

若減少文字,則

最外層div的高度僅被文字撐開,被設定浮動後,高度坍塌,無法對外層高度起到貢獻作用。

由於float的這種性質,在使用時常會對布局產生奇怪的效果,必要時需要清除浮動。這裡總結一下,幾種常用的清除浮動的方法:

1. clear:both

在浮動元素下面加乙個空div,設定clear:both,即

又獨佔一行,且外層div高度增大。

2.overflow: hidden

對浮動元素的父級元素設定overflow:hidden。

3. .clearfix

對包含浮動元素的父級新增class="clearfix",並設定

.clearfix/*為相容ie*/    

浮動與清除浮動

left 元素向左浮動。right 元素向右浮動。none 預設值。元素不浮動,並會顯示在其在文字中出現的位置。浮動的特性 浮動元素會從普通文件流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。不管乙個元素是行內元素還是塊級元素,如果被設定了浮動,那浮動元素會生成乙個塊級框,可以...

浮動與清除浮動

為元素設定了浮動之後,元素就會脫離文件流 可以看做是漂浮在文件流之上 存在。所有產生了浮動流的元素,塊級元素看不到它們。產生了bfc的元素和文字類屬性 inline 的元素以及文字都能看到浮動元素。如何觸發乙個盒子的bfc?position absolute float left right dis...

浮動與清除浮動

浮動布局是一種常見的布局方式,最初的使用目的是進行 的混排 清除浮動 浮動的使用場景 浮動通過css定義 div1 浮動可以取的值 none 預設 left right 當元素進行左浮動或者右浮動之後會脫離文件流,並且構成乙個浮動流,會覆蓋在沒有浮動的元素上,並且允許文字和內聯元素環繞在它周圍 浮動...