基礎又重要的浮動(float)

2021-10-03 03:45:27 字數 1386 閱讀 4587

在這之中我們講到的是div浮動方式,元素的浮動顧名思義就是可以飄浮起來的東西,設定了浮動屬性的元素會脫離標準流的控制,移動到其父元素中指定的位置。

為什麼有浮動?他有什麼作用,他的優勢和劣勢是什麼?

優勢 劣勢

屬性值作用left

元素盒子左浮動

right

元素盒子右浮動

none

元素盒子沒有使用浮動(預設值)

lang

="en"

>

>

charset

="utf-8"

>

name

="viewport"

content

="width=device-width, initial-scale=1.0"

>

>

三個盒子使用浮動來實現併排效果title

>

>

divdiv::after

.box1

.box2

.box3

style

>

head

>

>

class

="box1"

>

box 1div

>

class

="box2"

>

box 2div

>

class

="box3"

>

box 3div

>

body

>

html

>

屬性值

作用left

元素盒子清除左浮動(需要給清除浮動的第乙個最左邊的盒子新增clear:left清除左浮動)

right

元素盒子清除左浮動(需要給清除浮動的第乙個最右邊的盒子新增clear:right)

both

所有元素盒子清除(需要作用在要清除的浮動元素最下面)

如果有用浮動,就應該盡量清除浮動

就好比人生苦短,有始有終

世間的繁華,只能一生去觀望

美好的願望,只能一世去實現

一世一輪迴

第一種方式的公升級版:通過給高度塌陷的元素新增 :after 偽類元素 相當於在所右子元素浮動元素的最後面新增了乙個標籤,加上clear:both;優點也體現出來了

給父級元素新增overflow屬性方法

通用 萬能清浮法

該方法是最相容的方法了,幾乎解決了所有會出現版本問題的方式

.clearall

.clearall:after

css基礎 float浮動

doctype html html lang en head meta charset utf 8 title float title style body per red style head body div class per div class red div 層疊樣式表 英文全稱 casc...

CSS基礎(float屬性與清除浮動)

3.8 這是css裡比較重要的屬性 浮動,這個屬性會在以後經常用到,算是乙個重點吧 語法 float left right none 特點 浮動的元素不佔位置,脫離了標準文件流 頁面中標籤的預設顯示方式就是標準流 浮動的元素可以實現元素的模式互換 同方向浮動的元素會順次排列 浮動的元素頂端對齊 預設...

CSS中的浮動(float)

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