什麼是浮動？浮動帶來的影響？怎麼清除浮動？

不知名前端李小白發表於2022-01-26

浮動介紹

浮動（float）最初是為了讓文字環繞圖片排布，就想報紙上面的圖文混排模式。但 Web 開發人員很快意識到，任何東西都可以浮動，而不僅僅是影像，所以浮動的使用範圍擴大了。浮動曾被用來實現整個網站頁面的佈局，它使資訊列得以橫向排列（預設的設定則是按照這些列在原始碼中出現的順序縱向排列）。目前出現了更新更好的頁面佈局技術，所以使用浮動來進行頁面佈局應被看作傳統的佈局方法。

float屬性

在css中可以通過float屬性實現元素浮動，float屬性定義元素在哪個方向浮動，它有兩個值float:left 和 float:right，預設值為none 

  • 設定這兩個值元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
  • 浮動使元素脫離文件流，按照指定方向發生移動，遇到父級邊界或者相鄰浮動元素會停下來（padding也算）
  • 浮動元素之後的元素將圍繞它，之前的元素將不會受到影響

特點

  • 不區分行、塊、行內塊元素，使用浮動直接讓元素變為塊級

  • 支援寬高、margin、padding，但不支援margin：auto

  • 不會有空隙問題(塊級不存在基線對齊)

DEMO

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .container{
                width: 300px;
                height: 300px;
                background-color: #23A6D5;
            }
            img{
                width: 100px;
                /* 設定圖片左浮動 */
                float: left;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <img src="./image/start.jpg">
            <p>文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素文字環繞浮動元素</p>
        </div>
    </body>
</html>

執行效果：

浮動帶來的影響

通過上述簡單案例並不能直觀的發現浮動帶來的影響，這裡我們只需要將以上demo的容器大小去掉，讓內容撐開盒子就可發現問題所在！

.container{
    /* width: 300px;
    height: 300px; */
    background-color: #23A6D5;
}

得到效果如上所示，可以看出父元素高度塌陷，圖片已經不在容器內了。這樣的效果在網頁開發中會嚴重影響網頁佈局

另外，如果父元素寬度不夠，子元素浮動導致浮動元素掉落，元素會卡主

 

清除浮動方法有哪些？

清除浮動需要使用clear屬性，它有三個值：left、right、both ，left值定出左浮動，right值清除右浮動，both值清除所有浮動

這裡另外用一個demo演示幾種清除浮動的方法：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            *{
                margin: 0;
                padding: 0;
            }
            .container{
                padding: 5px;
                background-color: #23A6D5;
            }
            p{
                width: 50px;
                height: 50px;
                background-color: red;
                margin: 5px;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <p>1</p>
            <p>2</p>
            <p>3</p>
        </div>
    </body>
</html>

給p元素設定浮動效果後：

p{
    width: 50px;
    height: 50px;
    background-color: red;
    margin: 5px;
    float: left;
}

 解決以上浮動帶來的問題有以下幾種方法：

1）父級div定義height

.container{
    width: 200px;
    height: 100px;
    padding: 5px;
    background-color: #23A6D5;
}

 

 2）最後一個浮動元素後加空div標籤並新增樣式 clear:both

<div class="container">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <div style="clear: both;"></div>
</div>

 

3）包含浮動元素的父標籤新增樣式 overflow 為 hidden 或 auto

.container{
    padding: 5px;
    background-color: #23A6D5;
    overflow: hidden;
}

 

4）父級 div 定義 zoom:1(IE)

.container{
    padding: 5px;
    background-color: #23A6D5;
    overflow: hidden;
}

 

5）用 after偽元素清除浮動（推薦）

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
}
.clearfix {
    zoom: 1;
}
  • clearfix是父容器的class名稱
  • content:""是在父容器的結尾處放一個空白符
  • height: 0是讓這個這個空白字元不顯示出來
  • display: block clear: both是確保這個空白字元是非浮動的獨立區塊
  • 使用 zoom:1 支援IE6

清除浮動的優缺點？

  • 父級固定height： 只適合高度固定的佈局
  • 結尾空div法：如果頁面浮動佈局多，會增加很多空div
  • 父級BFC格局法：使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度。不能和position配合使用，因為超出的尺寸的會被隱藏
  • 父級div定義偽類：瀏覽器支援好，不容易出現怪問題（推薦）

 

相關文章