CSS總結 浮動

2021-08-08 14:39:43 字數 1188 閱讀 6866

這一章主要記錄定位與浮動常用的。

說到浮動我們要先說說標準流和浮動流。

標準流很常見,瀏覽器預設的方式就是標準流。

標準流怎麼理解呢?

實現我們得知道css中的三種元素分類。

行內元素,塊級元素,行內塊級元素

行內元素

塊級元素

行內塊級元素

不獨佔一行

獨佔一行

不獨佔一行

預設和內容一樣寬

預設和父元素一樣寬

預設和內容

不可以設定寬高

可以設定寬高

可以設定寬高

大概三種元素的去區別就出來了。

在這裡插入另外乙個知識點:

在html中通常把元素(標籤)分為兩類:

容器級標籤

文本級標籤

div h ul ol li dt等

span/p/em/ins等

可以巢狀其他的所有標籤

現在可以講講標準流了:

浮動的屬性:

clear

清除float

浮動left/right

左/右不允許浮動

left/right

左浮動/右浮動

both/none

均不可/不清除

none

不浮動

浮動有幾點要注意:

浮動是指設定浮動之後的元素會怎麼浮動在他周圍!!!

例如right表示後面的元素會排在他左邊!!!

浮動流不區分是什麼元素,只可以水平排版,沒有居中(center),不可以使用margin: 0 auto;均可以設定寬高。

特點前乙個浮動後面乙個沒有,那麼前面乙個會蓋住後面乙個(文字不會蓋住,會環繞在周圍),這裡可以試著去想想都浮動的排列景象。

先浮動的會在前面,後浮動的會在後面

浮動之後的位置由浮動之前在標準流中的位置來確定,這裡主要是理解為浮動後什麼元素會受影響

左浮動會去找左浮動,右浮動會跟在右浮動後面

當父元素寬度可以顯示所有浮動時,併排顯示

浮動的貼靠主要是指當父元素寬度不夠時會往前靠,怎麼理解呢,就是假如你乙個視窗放了很多把視窗寬度縮小時會自動往下排的現象

寫完浮動就到11點了。。。看來沒機會把定位寫完了~~~

CSS浮動總結

浮動屬性可以讓元素產生浮動效果,float的常用取值有 none 不浮動,預設值 left 向左浮動 right 向右浮動 元素一旦浮動後 脫離標準流 朝著左 右 方向移動,直到自己的邊界緊貼著包含塊 一般是父元素 或者其他浮動元素的邊界為止 定位元素會層疊在浮動元素上面 浮動元素不能與行內級內容層...

css浮動總結

原理 使浮動元素脫離文件流 作用 解決頁面橫向排列問題 同一層級下,第乙個元素設定浮動,脫離文件流 空標籤清除浮動 clearfix 偽元素清除浮動 clearfix after 相容低版本ie clearfix after1.父子元素,子元素設定margin top,此刻子元素的margin to...

CSS清除浮動總結

一 拋一塊問題磚 display block 先看現象 分析html 結構 divclass outer divclass div1 1div divclass div2 2div divclass div3 3div div 分析css 樣式 outer div1 div2 div3 這裡我沒有給...