---

浮動

網頁的布局方式

• 什么是網頁的布局方式?

  • 網頁的布局方式其實就是指瀏覽器是如何對網頁中的元素進行排版的

• 標準流(文檔流/普通流)排版方式

  • 其實瀏覽器默認的排版方式就是標準流的排版方式
  • 在CSS中將元素分為三類, 分別是塊級元素/行內元素/行內塊級元素
  • 在標準流中有兩種排版方式, 一種是垂直排版, 一種是水平排版
    • 垂直排版, 如果元素是塊級元素, 那么就會垂直排版
    • 水平排版, 如果元素是行內元素/行內塊級元素, 那么就會水平排版

• 浮動流排版方式

  • 浮動流是一種"半脫離標準流"的排版方式
  • 浮動流只有一種排版方式, 就是水平排版. 它只能設置某個元素左對齊或者右對齊

• 注意點:

  • 浮動流中沒有居中對齊, 也就是沒有center這個取值
  • 在浮動流中是不可以使用margin: 0 auto;

• 特點:

  • 在浮動流中是不區分塊級元素/行內元素/行內塊級元素的
  • 無論是塊級元素/行內元素/行內塊級元素都可以水平排版
  • 在浮動流中無論是塊級元素/行內元素/行內塊級元素都可以設置寬高
  • 綜上所述, 浮動流中的元素和標準流中的行內塊級元素很像

• 定位流排版方式

浮動元素的脫標

• 什么是浮動元素的脫標?
  • 脫標: 脫離標準流
  • 當某一個元素浮動之后, 那么這個元素看上去就像被從標準流中刪除了一樣, 這個就是浮動元素的脫標
• 浮動元素脫標之后會有什么影響?
  • 如果前面一個元素浮動了, 而后面一個元素沒有浮動 , 那么這個時候前面一個元就會蓋住后面一個元素

浮動元素排序規則

• 浮動元素排序規則
• 相同方向上的浮動元素, 先浮動的元素會顯示在前面, 后浮動的元素會顯示在后面

<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>

• 不同方向上的浮動元素, 左浮動會找左浮動, 右浮動會找右浮動

<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>

• 浮動元素浮動之后的位置, 由浮動元素浮動之前在標準流中的位置來確定

<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>

浮動元素貼靠現象

• 什么是浮動元素貼靠現象?
  • 如果父元素的寬度能夠顯示所有浮動元素, 那么浮動的元素會并排顯示
  • 
  • 如果父元素的寬度不能顯示所有浮動元素, 那么會從最后一個元開始往前貼靠

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

-

浮動元素字圍現象

• 什么是浮動元素字圍現象?
  • 浮動元素不會擋住沒有浮動元素中的文字, 沒有浮動的文字會自動給浮動的元素讓位置,這個就是浮動元素字圍現象

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

• 應用場景
  • 圖文混排

---

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