什么是浮動？浮動帶來的影響？怎么清除浮動？-有解無憂

浮動介紹

浮動（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定義偽類：瀏覽器支持好，不容易出現怪問題（推薦）

本文來自博客園，作者：不知名前端李小白，轉載請注明原文鏈接：https://www.cnblogs.com/libo-web/p/15843717.html

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/421646.html

標籤：Html/Css

上一篇：妙用濾鏡構建高級感拉滿的磨砂玻璃漸變背景

下一篇：CSS技術

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