CSS入門(mén)12-浮動(dòng)與清除浮動(dòng)

（注1：如果有問(wèn)題歡迎留言探討，一起學(xué)習(xí)！轉(zhuǎn)載請(qǐng)注明出處，喜歡可以點(diǎn)個(gè)贊哦！）
（注2：更多內(nèi)容請(qǐng)查看我的目錄。）

1.浮動(dòng)的定義

浮動(dòng)的框可以向左或向右移動(dòng)，直到它的外邊緣碰到包含框或另一個(gè)浮動(dòng)框的邊框?yàn)橹埂?/p>

由于浮動(dòng)框不在文檔的普通流中，所以文檔的普通流中的塊框表現(xiàn)得就像浮動(dòng)框不存在一樣。

2. 浮動(dòng)的特征

2.1 脫標(biāo)性

浮動(dòng)元素會(huì)脫離標(biāo)準(zhǔn)文檔流，根據(jù)屬性向左或右浮動(dòng)，使周?chē)刂匦屡帕小?/p> 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.1-1</title>
    <style>
        .div1 {
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 50px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
    </style>
</head>
<body>
<div class="div1">div1</div>
<div class="div2">div2</div>
<div class="div3">div3</div>
</body>
</html>
2.1-1

標(biāo)準(zhǔn)文檔流如上圖所示，塊級(jí)元素從上往下排列。我們?cè)囍鵀槠浼由细?dòng)屬性。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.1-2</title>
    <style>
        .div1 {
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 50px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="div1 fl">div1</div>
<div class="div2 fl">div2</div>
<div class="div3 fl">div3</div>
</body>
</html>
2.1-2

可以看到，元素向左漂浮，寬高可以指定，若不指定，默認(rèn)包裹其元素內(nèi)容。再來(lái)看下，浮動(dòng)元素對(duì)標(biāo)準(zhǔn)文檔流元素的影響。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.1-3</title>
    <style>
        .div1 {
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 50px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div>
    <div class="div1">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3">div3</div>
</div>

</body>
</html>
2.1-3

可以看到，div3不是紅色，而且檢查div3的元素時(shí)發(fā)現(xiàn)其真實(shí)位置竟然在被div2覆蓋的地方。那么如果將div2向右浮動(dòng)呢？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.1-4</title>
    <style>
        .div1 {
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 50px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fr {
            float: right;
        }
    </style>
</head>
<body>
<div>
    <div class="div1">div1</div>
    <div class="div2 fr">div2</div>
    <div class="div3">div3</div>
</div>

</body>
</html>
2.1-4

可以看得更明顯，div2其實(shí)是脫離標(biāo)準(zhǔn)文檔流以后覆蓋了div3。

2.2 寬高對(duì)浮動(dòng)的影響

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.2-1</title>
    <style>
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .div4{
            width: 90px;
            height: 100px;
            background-color: blue;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div>
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3 fl">div3</div>
    <div class="div4 fl">div4</div>
</div>

</body>
</html>
2.2-1

2.2-2

2.2-3

2.2-4

2.2-5

2.2-6

我們逐步將視窗寬度變小，可以發(fā)現(xiàn)，向左浮動(dòng)時(shí)，當(dāng)寬度不夠時(shí)，最右邊的盒子會(huì)向下挪到挨著左邊最突出的元素或者直到父元素邊框。

2.3 文字環(huán)繞

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>2.3</title>
<style>
div {
background-color: green;
}
.fl {
float: left;
}
.text {
word-break: break-all;
}
</style>
</head>
<body>
<div>
<img src="2.3.png" alt="" class="fl">
<div class="text">111111111111111111111111111111111111111111111111111111111111111111111111111111111</div>
</div>
</body>
</html>


2.3

2.4 高度坍塌

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.4</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3 fl">div3</div>
</div>
</body>
</html>

2.4

如圖所示，浮動(dòng)的元素并不會(huì)撐起其父元素的高度。這是怎么回事呢？我們會(huì)在BFC中進(jìn)行解釋。

3. 清除浮動(dòng)

清除浮動(dòng)，總體上來(lái)說(shuō)，有兩種思路：

  1. 利用clear屬性
  2. 利用BFC特性

下面來(lái)看一下兩種思路各有哪些具體實(shí)現(xiàn)方案。

3.1 利用clear屬性

3.1.1 直接使用clear屬性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.1</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
        .clear {
            clear: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3">div3</div>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="div3 clear">div3</div>
</div>
</body>
</html>
3.1.1

可以看到，如果需要清除浮動(dòng)的元素與浮動(dòng)元素同級(jí)，可以直接在需要清除浮動(dòng)的元素上添加clear屬性。

3.1.2 額外標(biāo)簽清除浮動(dòng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.1</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
        .clear {
            clear: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3 clear">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
    <div class="clear"></div>
</div>
<div class="div3">div3</div>
</body>
</html>
3.1.2

可以看到，不同級(jí)的外部元素想要清除浮動(dòng)影響，如果使用直接添加clear的方法，無(wú)法解決浮動(dòng)元素的高度坍塌問(wèn)題?？梢栽谛枰宄?dòng)的末尾添加一個(gè)空標(biāo)簽，用來(lái)清除浮動(dòng)。

3.1.3 :before，:after偽類(lèi)清除浮動(dòng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.1.3</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
        .clearfix {
            zoom: 1;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
            visibility: hidden;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer clearfix">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
</body>
</html>
3.1.3

其實(shí)原理上和添加空標(biāo)簽類(lèi)似。有幾點(diǎn)需要注意：

  1. zoom:1是為了兼容性，因?yàn)閕e6/7不能使用偽類(lèi)。
  2. content:' . '；display:block; 對(duì)于FF/Chrome/opera/IE8不能缺少，其中content()取值也可以為空。
  3. visibility:hidden;的作用是允許瀏覽器渲染它，但是不顯示出來(lái)，這樣才能實(shí)現(xiàn)清除浮動(dòng)。

這種方法是兼容性最好，后續(xù)影響也是最小的。下面提供CSS中的浮動(dòng)和清除浮動(dòng)，梳理一下！一文歸納的該方法：

// 現(xiàn)代瀏覽器clearfix方案，不支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}

// 全瀏覽器通用的clearfix方案
// 引入了zoom以支持IE6/7
.clearfix:after {
    display: table;
    content: " ";
    clear: both;
}
.clearfix{
    *zoom: 1;
}

// 全瀏覽器通用的clearfix方案【推薦】
// 引入了zoom以支持IE6/7
// 同時(shí)加入:before以解決現(xiàn)代瀏覽器上邊距折疊的問(wèn)題
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

3.2 利用BFC特性

為父元素添加以下屬性來(lái)觸發(fā)BFC：

  • float 為 left | right
  • overflow 為 hidden | auto | scorll
  • display 為 table-cell | table-caption | inline-block | flex | inline-flex
  • position 為 absolute | fixed

可以給父元素設(shè)置overflow:auto來(lái)簡(jiǎn)單地實(shí)現(xiàn)BFC清除浮動(dòng)，但是為了兼容IE最好用overflow:hidden。不過(guò)這樣元素陰影或下拉菜單會(huì)被截?cái)?，比較局限。下面選取前兩種方法來(lái)看一下效果。

3.2.1 使父元素浮動(dòng)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.2.1</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer fl">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
</body>
</html>
3.2.1

這種方法，以暴制暴，父元素變成浮動(dòng)以后同樣需要考慮其影響和清除。

3.2.2 父元素添加屬性overflow:hidden

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.2.2</title>
    <style>
        .outer {
            border: 3px solid black;
        }
        .div1 {
            width: 70px;
            height: 50px;
            background-color: green;
        }
        .div2 {
            width: 90px;
            height: 80px;
            background-color: yellow;
        }
        .div3 {
            width: 60px;
            height: 30px;
            background-color: red;
        }
        .fl {
            float: left;
        }
    </style>
</head>
<body>
<div class="outer">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="outer" style="overflow: hidden">
    <div class="div1 fl">div1</div>
    <div class="div2 fl">div2</div>
</div>
<div class="div3">div3</div>
</body>
</html>
3.2.2

4. 浮動(dòng)的應(yīng)用場(chǎng)景

  1. 文字環(huán)繞
    這是浮動(dòng)設(shè)計(jì)的初衷。
  2. 多列布局
    常用的多列布局，更推薦使用inline-block，當(dāng)然要注意列之間的空隙。但浮動(dòng)也經(jīng)常用于左邊有一塊固定寬度，右邊根據(jù)父元素寬度自適應(yīng)的情況。
  3. 菜單欄
    同樣可以使用浮動(dòng)或者inline-block實(shí)現(xiàn)。

參考

W3cSchool
CSS浮動(dòng)float詳解
CSS清浮動(dòng)處理（Clear與BFC）
CSS中的浮動(dòng)和清除浮動(dòng)，梳理一下！
CSS篇之2. 清除浮動(dòng)，什么時(shí)候需要清除浮動(dòng)，清除浮動(dòng)都有哪些方法
CSS復(fù)習(xí)筆記二：浮動(dòng)和清除浮動(dòng)
徹底理解浮動(dòng)float CSS浮動(dòng)詳解 清除浮動(dòng)的方法
經(jīng)驗(yàn)分享：CSS浮動(dòng)(float,clear)通俗講解
清除浮動(dòng)float (:after方法)
偽類(lèi):after清除浮動(dòng)的原理和方法

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 問(wèn)答題47 /72 常見(jiàn)瀏覽器兼容性問(wèn)題與解決方案？ 參考答案 (1)瀏覽器兼容問(wèn)題一：不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 14,200評(píng)論 1贊 92
  • 本文為轉(zhuǎn)載文章，轉(zhuǎn)載地址:經(jīng)驗(yàn)分享：CSS浮動(dòng)(float 寫(xiě)在前面的話： 如果讀者理解CSS盒子模型，但對(duì)于浮動(dòng)...
    翻炒吧蛋滾飯閱讀 1,125評(píng)論 1贊 14
  • 對(duì)于剛剛?cè)腴T(mén)學(xué)習(xí)前端的渣渣來(lái)說(shuō)，對(duì)于css浮動(dòng)甚是不解，故找來(lái)優(yōu)秀并通俗易解的文章來(lái)記錄。 教程開(kāi)始： 首先要知道...
    呆呆滴木木菇?jīng)?/span>閱讀 400評(píng)論 0贊 1
  • 本文以div元素布局為例。教程開(kāi)始：首先要知道，div是塊級(jí)元素（div與span），在頁(yè)面中獨(dú)占一行，自上而下排...
    TW妖妖閱讀 428評(píng)論 0贊 1
  • 作者：楊元原文地址：http://www.cnblogs.com/iyangyuan 很早以前就接觸過(guò)CSS，但對(duì)...
    IT程序獅閱讀 705評(píng)論 1贊 12

友情鏈接更多精彩內(nèi)容