---

浮動(dòng)

網(wǎng)頁(yè)的布局方式

• 什么是網(wǎng)頁(yè)的布局方式?

  • 網(wǎng)頁(yè)的布局方式其實(shí)就是指瀏覽器是如何對(duì)網(wǎng)頁(yè)中的元素進(jìn)行排版的

• 標(biāo)準(zhǔn)流(文檔流/普通流)排版方式

  • 其實(shí)瀏覽器默認(rèn)的排版方式就是標(biāo)準(zhǔn)流的排版方式
  • 在CSS中將元素分為三類, 分別是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素
  • 在標(biāo)準(zhǔn)流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
    • 垂直排版, 如果元素是塊級(jí)元素, 那么就會(huì)垂直排版
    • 水平排版, 如果元素是行內(nèi)元素/行內(nèi)塊級(jí)元素, 那么就會(huì)水平排版

• 浮動(dòng)流排版方式

  • 浮動(dòng)流是一種"半脫離標(biāo)準(zhǔn)流"的排版方式
  • 浮動(dòng)流只有一種排版方式, 就是水平排版. 它只能設(shè)置某個(gè)元素左對(duì)齊或者右對(duì)齊

• 注意點(diǎn):

  • 浮動(dòng)流中沒(méi)有居中對(duì)齊, 也就是沒(méi)有center這個(gè)取值
  • 在浮動(dòng)流中是不可以使用margin: 0 auto;

• 特點(diǎn):

  • 在浮動(dòng)流中是不區(qū)分塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素的
  • 無(wú)論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以水平排版
  • 在浮動(dòng)流中無(wú)論是塊級(jí)元素/行內(nèi)元素/行內(nèi)塊級(jí)元素都可以設(shè)置寬高
  • 綜上所述, 浮動(dòng)流中的元素和標(biāo)準(zhǔn)流中的行內(nèi)塊級(jí)元素很像

• 定位流排版方式

浮動(dòng)元素的脫標(biāo)

• 什么是浮動(dòng)元素的脫標(biāo)?
  • 脫標(biāo): 脫離標(biāo)準(zhǔn)流
  • 當(dāng)某一個(gè)元素浮動(dòng)之后, 那么這個(gè)元素看上去就像被從標(biāo)準(zhǔn)流中刪除了一樣, 這個(gè)就是浮動(dòng)元素的脫標(biāo)
• 浮動(dòng)元素脫標(biāo)之后會(huì)有什么影響?
  • 如果前面一個(gè)元素浮動(dòng)了, 而后面一個(gè)元素沒(méi)有浮動(dòng) , 那么這個(gè)時(shí)候前面一個(gè)元就會(huì)蓋住后面一個(gè)元素

浮動(dòng)元素排序規(guī)則

• 浮動(dòng)元素排序規(guī)則
• 相同方向上的浮動(dòng)元素, 先浮動(dòng)的元素會(huì)顯示在前面, 后浮動(dòng)的元素會(huì)顯示在后面

<style>.box1{float: left;width: 50px;height: 50px;background-color: red;}.box2{float: left;width: 100px;height: 100px;background-color: pink;}.box3{float: left;width: 150px;height: 150px;background-color: yellow;} </style>

• 不同方向上的浮動(dòng)元素, 左浮動(dòng)會(huì)找左浮動(dòng), 右浮動(dòng)會(huì)找右浮動(dòng)

<style>.box1{float: left;width: 50px;height: 50px;background-color: red;}.box2{float: right;width: 100px;height: 100px;background-color: pink;}.box3{float: left;width: 150px;height: 150px;background-color: yellow;}.box4{float: right;width: 200px;height: 200px;background-color: tomato;} </style>

• 浮動(dòng)元素浮動(dòng)之后的位置, 由浮動(dòng)元素浮動(dòng)之前在標(biāo)準(zhǔn)流中的位置來(lái)確定

<style>.box1{float: left;width: 50px;height: 50px;background-color: red;}.box2{width: 100px;height: 100px;background-color: pink;}.box3{float: left;width: 150px;height: 150px;background-color: yellow;}.box4{float: left;width: 200px;height: 200px;background-color: tomato;} </style>

浮動(dòng)元素貼靠現(xiàn)象

• 什么是浮動(dòng)元素貼靠現(xiàn)象?
  • 如果父元素的寬度能夠顯示所有浮動(dòng)元素, 那么浮動(dòng)的元素會(huì)并排顯示
  • 如果父元素的寬度不能顯示所有浮動(dòng)元素, 那么會(huì)從最后一個(gè)元開(kāi)始往前貼靠

- 如果貼靠了前面所有浮動(dòng)元素之后都不能顯示, 最終會(huì)貼靠到父元素的左邊或者右邊

-

浮動(dòng)元素字圍現(xiàn)象

• 什么是浮動(dòng)元素字圍現(xiàn)象?
  • 浮動(dòng)元素不會(huì)擋住沒(méi)有浮動(dòng)元素中的文字, 沒(méi)有浮動(dòng)的文字會(huì)自動(dòng)給浮動(dòng)的元素讓位置,這個(gè)就是浮動(dòng)元素字圍現(xiàn)象

div{float: left;width: 100px;height: 100px;/*background-color: red;*/border: 1px solid #000;}p{width: 500px;height: 500px;background-color: yellow;}

• 應(yīng)用場(chǎng)景
  • 圖文混排

---

學(xué)習(xí)交流方式:
1.微信公眾賬號(hào)搜索: 李南江(配套視頻,代碼,資料各種福利獲取)
2.加入前端學(xué)習(xí)交流群:
302942894 / 289964053 / 11550038

總結(jié)

以上是生活随笔為你收集整理的15-CSS基础-浮动流的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。