在css中,float這一屬性有著非常重要的作用,在一般的布局中,會有諸如按照一定要求讓文字環繞,或者環繞等說法。float的作用就類似於它。設定乙個元素浮動方法如下:
#setfloat
其中float有4種屬性,分別為:
left:靠左邊浮動。
right:靠右邊浮動。
none:不浮動。
inherit:繼承父級元素的浮動屬性。
浮動的用法有很多,例如最常見的讓多個div顯示到同一行:
<其中divleft的css檔案為:divclass="div0"
>
<
divclass="divleft"
>第乙個div
div>
<
divclass="divleft"
>
第二個div
div>
<
divclass="divleft"
>第三個div
div>
div>
.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 提供了來設定盒子的擺放位置,分別是 標準流 和,其中 普通流 標準流 行內元素會按照順序...