CSS入門12-浮動與清除浮動

(注1:如果有問題歡迎留言探討翔横,一起學習读跷!轉(zhuǎn)載請注明出處,喜歡可以點個贊哦:萄洹)
(注2:更多內(nèi)容請查看我的目錄效览。)

1.浮動的定義

浮動的框可以向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止荡短。

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

2. 浮動的特征

2.1 脫標性

浮動元素會脫離標準文檔流掘托,根據(jù)屬性向左或右浮動瘦锹,使周圍元素重新排列。

<!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

標準文檔流如上圖所示闪盔,塊級元素從上往下排列弯院。我們試著為其加上浮動屬性。

<!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

可以看到泪掀,元素向左漂浮听绳,寬高可以指定,若不指定族淮,默認包裹其元素內(nèi)容辫红。再來看下凭涂,浮動元素對標準文檔流元素的影響。

<!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的元素時發(fā)現(xiàn)其真實位置竟然在被div2覆蓋的地方。那么如果將div2向右浮動呢名惩?

<!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其實是脫離標準文檔流以后覆蓋了div3。

2.2 寬高對浮動的影響

<!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)攻谁,向左浮動時,當寬度不夠時弯予,最右邊的盒子會向下挪到挨著左邊最突出的元素或者直到父元素邊框戚宦。

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

如圖所示,浮動的元素并不會撐起其父元素的高度锈嫩。這是怎么回事呢受楼?我們會在BFC中進行解釋。

3. 清除浮動

清除浮動呼寸,總體上來說艳汽,有兩種思路:

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

下面來看一下兩種思路各有哪些具體實現(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

可以看到对雪,如果需要清除浮動的元素與浮動元素同級河狐,可以直接在需要清除浮動的元素上添加clear屬性。

3.1.2 額外標簽清除浮動

<!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

可以看到瑟捣,不同級的外部元素想要清除浮動影響馋艺,如果使用直接添加clear的方法,無法解決浮動元素的高度坍塌問題蝶柿≌筛疲可以在需要清楚浮動的末尾添加一個空標簽非驮,用來清除浮動交汤。

3.1.3 :before,:after偽類清除浮動

<!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

其實原理上和添加空標簽類似劫笙。有幾點需要注意:

  1. zoom:1是為了兼容性芙扎,因為ie6/7不能使用偽類。
  2. content:' . '填大;display:block; 對于FF/Chrome/opera/IE8不能缺少戒洼,其中content()取值也可以為空。
  3. visibility:hidden;的作用是允許瀏覽器渲染它允华,但是不顯示出來圈浇,這樣才能實現(xiàn)清除浮動寥掐。

這種方法是兼容性最好,后續(xù)影響也是最小的磷蜀。下面提供CSS中的浮動和清除浮動召耘,梳理一下!一文歸納的該方法:

// 現(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
// 同時加入:before以解決現(xiàn)代瀏覽器上邊距折疊的問題
.clearfix:before,
.clearfix:after {
    display: table;
    content: " ";
}
.clearfix:after {
    clear: both;
}
.clearfix{
    *zoom: 1;
}

3.2 利用BFC特性

為父元素添加以下屬性來觸發(fā)BFC:

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

可以給父元素設置overflow:auto來簡單地實現(xiàn)BFC清除浮動污它,但是為了兼容IE最好用overflow:hidden。不過這樣元素陰影或下拉菜單會被截斷庶弃,比較局限衫贬。下面選取前兩種方法來看一下效果。

3.2.1 使父元素浮動

<!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

這種方法歇攻,以暴制暴固惯,父元素變成浮動以后同樣需要考慮其影響和清除。

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. 浮動的應用場景

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

參考

W3cSchool
CSS浮動float詳解
CSS清浮動處理(Clear與BFC)
CSS中的浮動和清除浮動栈暇,梳理一下!
CSS篇之2. 清除浮動箍镜,什么時候需要清除浮動源祈,清除浮動都有哪些方法
CSS復習筆記二:浮動和清除浮動
徹底理解浮動float CSS浮動詳解 清除浮動的方法
經(jīng)驗分享:CSS浮動(float,clear)通俗講解
清除浮動float (:after方法)
偽類:after清除浮動的原理和方法

最后編輯于
?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市色迂,隨后出現(xiàn)的幾起案子香缺,更是在濱河造成了極大的恐慌,老刑警劉巖歇僧,帶你破解...
    沈念sama閱讀 219,490評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件图张,死亡現(xiàn)場離奇詭異,居然都是意外死亡诈悍,警方通過查閱死者的電腦和手機祸轮,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,581評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來侥钳,“玉大人适袜,你說我怎么就攤上這事∠隙幔” “怎么了苦酱?”我有些...
    開封第一講書人閱讀 165,830評論 0 356
  • 文/不壞的土叔 我叫張陵售貌,是天一觀的道長。 經(jīng)常有香客問我疫萤,道長趁矾,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,957評論 1 295
  • 正文 為了忘掉前任给僵,我火速辦了婚禮毫捣,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘帝际。我一直安慰自己蔓同,他們只是感情好,可當我...
    茶點故事閱讀 67,974評論 6 393
  • 文/花漫 我一把揭開白布蹲诀。 她就那樣靜靜地躺著斑粱,像睡著了一般。 火紅的嫁衣襯著肌膚如雪脯爪。 梳的紋絲不亂的頭發(fā)上则北,一...
    開封第一講書人閱讀 51,754評論 1 307
  • 那天,我揣著相機與錄音痕慢,去河邊找鬼尚揣。 笑死,一個胖子當著我的面吹牛掖举,可吹牛的內(nèi)容都是我干的快骗。 我是一名探鬼主播,決...
    沈念sama閱讀 40,464評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼塔次,長吁一口氣:“原來是場噩夢啊……” “哼方篮!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起励负,我...
    開封第一講書人閱讀 39,357評論 0 276
  • 序言:老撾萬榮一對情侶失蹤藕溅,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后继榆,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體巾表,經(jīng)...
    沈念sama閱讀 45,847評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,995評論 3 338
  • 正文 我和宋清朗相戀三年裕照,在試婚紗的時候發(fā)現(xiàn)自己被綠了攒发。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,137評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡晋南,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出羔砾,到底是詐尸還是另有隱情负间,我是刑警寧澤偶妖,帶...
    沈念sama閱讀 35,819評論 5 346
  • 正文 年R本政府宣布,位于F島的核電站政溃,受9級特大地震影響趾访,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜董虱,卻給世界環(huán)境...
    茶點故事閱讀 41,482評論 3 331
  • 文/蒙蒙 一扼鞋、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧愤诱,春花似錦云头、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,023評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至科吭,卻和暖如春昏滴,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背对人。 一陣腳步聲響...
    開封第一講書人閱讀 33,149評論 1 272
  • 我被黑心中介騙來泰國打工谣殊, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人牺弄。 一個月前我還...
    沈念sama閱讀 48,409評論 3 373
  • 正文 我出身青樓蟹倾,卻偏偏與公主長得像,于是被迫代替她去往敵國和親猖闪。 傳聞我的和親對象是個殘疾皇子鲜棠,可洞房花燭夜當晚...
    茶點故事閱讀 45,086評論 2 355

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,754評論 1 92
  • 本文為轉(zhuǎn)載文章培慌,轉(zhuǎn)載地址:經(jīng)驗分享:CSS浮動(float 寫在前面的話: 如果讀者理解CSS盒子模型豁陆,但對于浮動...
    翻炒吧蛋滾飯閱讀 1,044評論 1 14
  • 對于剛剛?cè)腴T學習前端的渣渣來說,對于css浮動甚是不解吵护,故找來優(yōu)秀并通俗易解的文章來記錄盒音。 教程開始: 首先要知道...
    呆呆滴木木菇?jīng)?/span>閱讀 335評論 0 1
  • 本文以div元素布局為例。教程開始:首先要知道馅而,div是塊級元素(div與span)祥诽,在頁面中獨占一行,自上而下排...
    TW妖妖閱讀 388評論 0 1
  • 作者:楊元原文地址:http://www.cnblogs.com/iyangyuan 很早以前就接觸過CSS瓮恭,但對...
    IT程序獅閱讀 649評論 1 12