CSS浮動寫法

來源:互聯網
上載者:User
這一章主要記錄定位與浮動常用的。

1.浮動

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

1.標準流

標準流很常見,瀏覽器預設的方式就是標準流。
標準流怎麼理解呢?
實現我們得知道CSS中的三種元素分類。

行內元素,區塊層級元素,行內區塊層級元素

行內元素 區塊層級元素 行內區塊層級元素
不獨佔一行 獨佔一行 不獨佔一行
預設和內容一樣寬 預設和父元素一樣寬 預設和內容
不可以設定寬高 可以設定寬高 可以設定寬高

大概三種元素的去區別就出來了。
在這裡插入另外一個知識點:
在HTML中通常把元素(標籤)分為兩類:

容器級標籤 文本級標籤
p h ul ol li dt等 span/p/em/ins等
可以嵌套其他的所有標籤 只可以嵌套文字/圖片/超連結

現在可以講講標準流了:

在標準流中有兩種排版方式,區塊層級元素按照垂直排版,行內元素和行內塊級按照水平排版,順著來

2.浮動流

浮動的屬性:

clear 清除 float 浮動
left/right 左/右不允許浮動 left/right 左浮動/右浮動
both/none 均不可/不清除 none 不浮動

浮動有幾點要注意:

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

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

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

特點
前一個浮動後面一個沒有,那麼前面一個會蓋住後面一個(文字不會蓋住,會環繞在周圍),這裡可以試著去想想都浮動的排列景象。
先浮動的會在前面,後浮動的會在後面
浮動之後的位置由浮動之前在標準流中的位置來確定,這裡主要是理解為浮動後什麼元素會受影響
左浮動會去找左浮動,右浮動會跟在右浮動後面
當父元素寬度可以顯示所有浮動時,並排顯示
浮動的貼靠主要是指當父元素寬度不夠時會往前靠,怎麼理解呢,就是假如你一個視窗放了很多圖片把視窗寬度縮小時圖片會自動往下排的現象
相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.