關於css中float的用法整理及清除浮動方法。

2021-06-23 03:18:53 字數 937 閱讀 6815

在css中,float這一屬性有著非常重要的作用,在一般的布局中,會有諸如按照一定要求讓文字環繞,或者環繞等說法。float的作用就類似於它。設定乙個元素浮動方法如下:

#setfloat

其中float有4種屬性,分別為:

left:靠左邊浮動。

right:靠右邊浮動。

none:不浮動。

inherit:繼承父級元素的浮動屬性。

浮動的用法有很多,例如最常見的讓多個div顯示到同一行:

<

divclass="div0"

>

<

divclass="divleft"

>第乙個div

div>

<

divclass="divleft"

>

第二個div

div>

<

divclass="divleft"

>第三個div

div>

div>

其中divleft的css檔案為:

.divleft
這樣就可以讓在div0中的3個div在同一行顯示。

但在使用float的時候一定要注意乙個問題,當前一行設定好float屬性時,對後面的**仍然有效果,後面的元素會跟隨著浮動到上乙個元素的邊界,這也是曾經困擾我很長一段時間的問題。因此我們在設定完浮動之後,沒有特殊情況,一般對其float進行清除,具體**為:

.clearfloat

其中clear也有left,right等不同屬性,比較常用的就是both。但一些特殊情況也會用到單邊的清除。

這種清除可以通過加入乙個空的div來實現:

css關於浮動的例子 float

floating examples box1 float to the left.box1 box2 box3 box1 float to left and under the box2 box1 box2 box3 all box float left box1 box2 box3 1 第乙個例子...

CSS中float的應用

自從工作了之後就沒更新部落格。工作了之後從事了前端和後台的工作,好多事情都要從頭開始學。剛入職不久就丟了不少很雜碎的任務給我。在剛開始調樣式的時候覺得好心累,感覺都控制不了那些樣式,又不能像做android的xml介面那樣拖來拖去,好煩。今天接觸了一天float,感覺還是挺多學問的。浮動的規則 浮動...

CSS中的浮動(float)

宣告 本人的所有部落格皆為個人筆記,作為個人知識索引使用,因此在敘述上存在邏輯不通順 跨度大等問題,希望理解。分享出來僅供大家學習翻閱,若有錯誤希望指出,感謝!網頁布局的核心 就是用 css 來擺放盒子 css 提供了來設定盒子的擺放位置,分別是 標準流 和,其中 普通流 標準流 行內元素會按照順序...