五、浮動

5-1、標準文檔流

塊級元素：獨占一行

h1~h6 p div 列表...

行內元素💪🏽：不獨占一行

span a img strong...

行內元素可以被包含在塊級元素中🪭🩰，反之則不行

5-2🤾🏿‍♀️、display

display是一種實現行內元素的排列方式，但多數情況用float

<!--
block 塊元素
inline 行內元素
inline-block 是塊元素，但是可以內聯🍮，在一行
none
--><style>
    div{
        width:100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }
    span{
        width:100px;
        height: 100px;
        border: 1px solid red;
        display: inline-block;
    }</style>

5-3、float

#father{
    border:1px #000 solid
}
.layer01{
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer02{
    border:1px #F00 dashed;
    display: inline-block;
    float: left;
}
.layer03{
    border:1px #F00 dashed;
    display: inline-block;
    float: right;
}

5-4☣️、父級邊框塌陷問題

clear

/*
clear:left; 左側不允許有浮動元素
clear:right; 右側不允許有浮動元素
clear:both; 兩側不允許有浮動元素
*/

解決方案：

1. 增加父級元素的高度

#father{
    border:1px #000 solid;
    height: 500px;
}

2. 增加一個空的div標簽，清除浮動

<div class="clear"></div>.clear{
    clear: both;
}

3. overflow

在父級元素中增加一個 overflow：hidden

4. 父類添加一個偽類🧞‍♂️：after

#father:after{
    content: '';
    display: block;
    clear: both;}

小結🍳：

• 浮動元素後面增加空div，簡單，但代碼中盡量避免空div

• 設置父元素高度，簡單，但元素設置了固定的高度⏫，就會被限製

• overflow，簡單🙅🏻‍♂️，下拉的一些場景避免使用

• 父類添加一個偽類：after（推薦使用），寫法稍微復雜🏄🏻，但沒有副作用

5-5、對比

• display🚎：方向不可以控製

• float：浮動起來會脫離標準文檔流，要解決父級邊框塌陷問題

鏈接：https://blog.csdn.net/clover_page/article/details/130100672

作者🌄🧔：姜伯約