HTML5教程-CSS基礎浮動流-李南江

配套視頻下載地址

浮動

網頁的佈局方式

• 什麼是網頁的佈局方式?

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

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

  • 垂直排版, 若是元素是塊級元素, 那麼就會垂直排版

  • 水平排版, 若是元素是行內元素/行內塊級元素, 那麼就會水平排版

  • 其實瀏覽器默認的排版方式就是標準流的排版方式

  • 在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;
        }

• 應用場景

  • 圖文混排