前端重構範式之 float layout

時間 2019-11-16

標籤前端範式 float layout 欄目 CSS 简体版

原文原文鏈接

本文由 Rhyme、Captain 發表在 ScalaCool 團隊博客。css

若是讓我用一句話來總結浮動佈局，就是浮動佈局是一種排隊的藝術。你能夠向左排隊、向右排隊，關鍵在於你如何去組織他們。若是你去看float的屬性值就會發現它最爲重要的無非就是left和right，而他們顧名思義就是向左或向右進行浮動。在咱們的網頁佈局中，凡是涉及到水平佈局的，大都會涉及到浮動，例如咱們的導航欄，水平方向的網頁佈局，他們都或多或少的在水平方向進行向左或向右的排隊。所以，若是說網頁的佈局是擺放一個個盒子的藝術，那麼浮動佈局就是在水平方向擺放盒子的藝術。html

那麼咱們爲何要在水平方向進行佈局呢？這就猶如多一個遊戲規則與少一個遊戲規則的區別。咱們能夠用咱們小時候玩過的堆積木遊戲來作一個形象的比喻。普通的佈局就如同一個盒子疊着一個盒子的遊戲規則，咱們在同一個水平方向只能放一個盒子，所以只能達到下圖中的效果前端

而浮動佈局容許你在同一個水平方向能夠放置多個盒子，共同組成一個大盒子，也就是說原來的一個盒子再也不是一個簡單的盒子，它的內部能夠由各類複雜的佈局組成，所以你就能夠很輕易得實現下圖中的效果，雖然你乍一看下方的佈局好像有違遊戲規則，可是隻要你細心一點進行下圖中的劃分，就能夠發現其實它的最終的規則沒有變，依舊是普通佈局中的一個盒子疊一個盒子的遊戲規則，只不過是它的盒子結構變得更豐富，功能更增強大了了而已。所以明白了這一點，你也就能明白了爲何要有浮動佈局，由於，它能夠實現更多樣的佈局來實現各類各樣的需求。瀏覽器

好，如今你對這個積木遊戲有個必定的瞭解，也對浮動佈局有了一個整體的認識，可是咱們知道一個厲害的遊戲玩家，並非由於他比其餘人要有天賦，大部分緣由是由於他對遊戲規則更爲了解。所以要想成爲一個厲害的前端玩手，你就須要對前端的遊戲規則更爲了解。因此，接下來就讓咱們正式走近這個積木遊戲的大門，盡情得探索和玩耍吧！微信

1. 網頁中的地基-文檔流

首先做爲積木遊戲的入門，咱們須要對最基礎的遊戲規則作個瞭解，而這個最基礎的遊戲規則在網頁設計中被稱做「文檔流」。你能夠把積木遊戲中的一個個盒子看作是咱們頁面中的一個個標籤，例如<div></div>標籤就能夠看作是一個盒子。可是有一點不一樣的是，在咱們的網頁中，有兩種類型的盒子，一種是被稱爲塊元素的盒子，相似div，另外一種是被稱爲內聯元素的盒子，例如span。這兩種類型的盒子在文檔流中或脫離文檔流的時候會表現出不一樣的性質，直接影響了咱們的網頁佈局。因此接下來咱們將介紹這兩種類型的盒子在文檔流中具備什麼特色？至於脫離文檔流以後的特色，會在後面「元素的變性」那一節中講述。佈局

首先咱們須要瞭解什麼是文檔流？測試

若是說把一個複雜的網頁想象成一棟漂亮的樓房,那麼這棟樓的地基就是文檔流。上面的樓房就是各類定位和浮動的綜合體。（定位顧名思義就是負責元素在網頁中的位置，具體會在後面的系列中作詳細地介紹）spa

咱們所建立的元素默認都在文檔流中。例如如下代碼中的div和h2標籤都處於文檔流中scala

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>float layout</title>
</head>
<body>
<div>
    <h2>我處在文檔流中</h2>
</div>
</body>
</html>
複製代碼

瞭解了文檔流，接下來咱們將介紹兩種類型的盒子(塊元素與內聯元素)在文檔流中具備什麼特色設計

霸道的盒子-塊元素

div,p等標籤被稱爲塊元素

塊元素在文檔流中非常霸道，哪怕它的實際大小隻有100px,可是它仍是獨佔一行，且自上而下排列

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>霸道的盒子-塊元素</title>
    <style> .box { width: 100px; height: 100px; } .box1 { background-color: aqua; } .box2 { background-color: aquamarine; } .box3 { background-color: bisque; } </style>
</head>
<body>
<div class="box box1"></div>
<div class="box box2"></div>
<div class="box box3"></div>
</body>
</html>
複製代碼

霸道的塊元素在文檔流中默認寬度是父元素的100%,它的width屬性值默認爲auto,當元素的width屬性值爲auto時,此時修改元素左右內邊距不會修改該元素自己的寬度大小，而是會自動修改該元素的寬度，來適應內邊距，下圖中綠色的塊元素就添加了一個左100px的內邊距,你會發現綠色的塊元素的寬度大小並無改變，而是自動調整了寬度來適應內邊距的改變

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>霸道的盒子-塊元素</title>
    <style> .box1 { height: 100px; background-color: aqua; } .box2 { /*添加左內邊距不會影響該元素的寬度大小*/ padding-left: 100px; height: 100px; background-color: aquamarine; } .box2-child { width: 100px; height: 100px; background-color: bisque; } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
    <div class="box2-child">

    </div>
</div>
</body>
</html>
複製代碼

塊元素在文檔流中的高度能夠說是終於沒有那麼霸道了，它的高度默認是由它裏面的內容撐開的

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>霸道的盒子-塊元素</title>
    <style> .box1 { background-color: aqua; } </style>
</head>
<body>
<div class="box1">a</div>
</body>
</html>
複製代碼

最後總結一下塊元素在文檔流中的特色：

塊元素很霸道，哪怕自身大小隻有100px,它也會獨佔一行
塊元素的寬度默認是父元素的100%，width屬性值爲auto,會自動調整寬度
塊元素的高度是它惟一不那麼霸道的地方，默認被裏面的內容撐開

Tips: 必定要注意是在文檔流中，這點對於以後理解浮動佈局特別重要。

最環保的盒子-內聯元素

span、a等標籤屬於內聯元素

相比於塊元素的霸道，內聯元素則要節約環保不少，它在文檔流中僅佔自身大小,也就是說寬高默認都被其中的內容撐開,且從左向右排列

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最環保的盒子-內聯元素</title>
    <style> .box1 { background-color: aqua; } .box2 { background-color: aquamarine; } .box3 { background-color: yellow; } </style>
</head>
<body>
<span class="box1">a</span>
<span class="box2">a</span>
<span class="box3">a</span>
</body>
</html>
複製代碼

內聯元素不能設置寬和高，也就是說給他們設置width或者height屬性是沒有用的，你看它們是有多節約，給它們它們都不要一點多的。注意觀察示例中的代碼，設置了寬和高是失效的

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最環保的盒子-內聯元素</title>
    <style> .box1 { /*不能給內聯元素設置寬和高*/ width: 100px; height: 100px; background-color: aqua; } </style>
</head>
<body>
<span class="box1">a</span>
</body>
</html>
複製代碼

一行中放不下時，內聯元素會自動在下一行從左向右排列

最後咱們一塊兒來總結一下內聯元素在文檔流中的特色

內聯元素很環保，只佔用元素本省的大小，從左向右排列
給內聯元素設置寬高是無效的，它依舊只佔用元素本省的大小
一行中放不下時，內聯元素會自動在下一行從左向右排列

Tips: 這裏再強調一遍，以上都是在文檔流中的特色，這點對於以後理解浮動佈局特別重要。由於，元素浮動以後會脫離文檔流，以上這些約束也就不存在了

2.初見浮動

咱們已經解讀了文檔流的遊戲規則，所以咱們能夠很輕易得用三個塊元素實現如下的效果

可是在咱們網頁設計中常常會有這樣的需求，三個div在同一行的佈局效果。咱們能夠清晰得分析出如下圖片是三個div佈局的水平排列。由於在網頁設計的時候咱們大都採用div來進行網頁的佈局。

所以咱們就要解決這個問題，如何讓3個div塊元素水平排列？

這個時候咱們就要思考既然塊狀元素在文檔流中獨佔一行，達不到我想要的效果，那若是我讓塊狀元素脫離文檔流，是否是就沒有這個限制了呢？答案確實如此，以上的效果，就是經過爲div塊元素設置浮動屬性float:left來使得這些塊元素脫離文檔流向左浮動。

補充：脫離文檔流能夠理解爲在原有的地基上新建一層樓進行設計，新建的樓層不徹底遵照地基中的遊戲規則，可使得塊狀元素再也不獨佔一行，具體的會在以後進行介紹

以上實例的代碼以下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試浮動佈局</title>
    <style> .box{ width: 100px; height: 100px; } .box1{ background-color: aqua; } .box2{ background-color: red; } .box3{ background-color: black; } </style>
</head>
<body>
<div class="box box1" style="float: left"></div>
<div class="box box2" style="float: left"></div>
<div class="box box3" style="float: left"></div>
</body>
</html>
複製代碼

3. 解讀浮動的遊戲規則

到這裏你已經瞭解了最基礎的遊戲規則-文檔流，也對浮動佈局有了一個初步的認識，可是咱們要想在地基之上搭建出漂亮的房子，還須要進一步的解讀浮動的遊戲規則

3.1 元素的層級

浮動使得元素脫離了文檔流，能夠理解元素是在文檔流(地基)之上進行的活動。明白了這一點，你就能夠明白接下來的這句話:浮動的元素對文檔流(地基)中的元素是不可見的，由於它脫離了地基，位於地基之上。

浮動是在地基之上進行的活動，那麼它不免會帶來一個問題，就是若是浮動元素與地基上原有的元素或者別的脫離文檔流的元素重疊了，這個時候應該怎麼辦呢？究竟是誰說了算呢？別急，你想到的，他們也都想到了，而且定好了一系列的遊戲規則。而咱們做爲玩家，只要知道這些規則的存在，而且學以至用就能夠了。咱們這一節所講的「元素的層級」講的就是這些規則。

首先在網頁中元素的歸屬能夠大體分爲兩種，一種是在文檔流中，另外一種是不在文檔流中，也就是脫離文檔流。在文檔流中的元素屬於低層級，脫離文檔流的元素屬於高層級。那顧名思義，高層級的元素會蓋住低層級的元素，那展示在視覺效果上就是蓋住的那一部分我只能看見高層級元素，看不見低層級元素。而浮動佈局是一種脫離文檔流的藝術，所以浮動元素屬於高層級。可是這也只解決了一個問題，就是文檔流與非文檔流的元素層級的問題，那非文檔流的元素之間呢，若是它們覆蓋了，又是什麼樣的遊戲規則呢？

首先全部非文檔流的元素也就是脫離文檔流的元素在層級上的地位都是相同的。具體的覆蓋規則有兩條

z-index屬性值大的覆蓋屬性值小的
z-index屬性值同樣的狀況下，後面的元素蓋住前面的元素

接下來是一些示例，能夠加深你對以上這些結論的理解

結論1：浮動元素處於高層級，會覆蓋處於低層級的文檔流元素

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素層級</title>
    <style> .box1{ float: left; // 注意這裏設置了浮動屬性 width: 100px; height: 100px; background-color: aqua; } .box2{ width: 200px; height: 200px; background-color: red; } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
複製代碼

結論2：脫離文檔流的元素都處於高層級，它們地位是相等的，覆蓋規則爲：後面的元素會覆蓋前面的元素

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試浮動佈局</title>
    <style> .box1 { float: left; // 開啓浮動定位，元素處於高層級2 width: 100px; height: 100px; background-color: aqua; } .box2 { position: absolute; // 開啓絕對定位，元素處於高層級2 top: 50px; left: 50px; width: 100px; height: 100px; background-color: red; } .box3 { position: relative; // 開啓相對定位，元素處於高層級2 left: 100px; top: 100px; width: 100px; height: 100px; background-color: black; } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
複製代碼

結論3：脫離文檔流的元素能夠設定z-index屬性來提高本身的層級，z-index屬性值越大的越優先顯示，默認爲0

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試浮動佈局</title>
    <style> .box1 { float: left; // 開啓了浮動定位，元素處於層級2 z-index: 1; // 設置z-index 優先級爲1 width: 100px; height: 100px; background-color: aqua; } .box2 { position: absolute; // 開啓了絕對定位，元素處於層級2 z-index: 2; // 設置z-index 優先級爲2 top: 50px; left: 50px; width: 100px; height: 100px; background-color: red; } .box3 { position: relative; // 開啓了相對定位，元素處於層級2 z-index: 1; // 設置z-index 優先級爲1 left: 100px; top: 100px; width: 100px; height: 100px; background-color: black; } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
複製代碼

補充：

z-index屬性的設置只對開啓浮動或定位的元素有效

絕對定位:元素相對於最近的定位祖先元素進行定位

相對定位:元素相對於元素原先在文檔流中的位置進行定位

最後，咱們來總結一下元素的層級關係：

脫離文檔流的元素處於高層級，文檔流中的元素屬於低層級，高層級的元素會覆蓋低層級的元素
浮動會使得元素脫離文檔流，所以浮動的元素會覆蓋文檔流中的元素
脫離文檔流的元素地位都是相等的，都屬於高層級，具體覆蓋規則爲：
1. z-index相同時，後面的元素覆蓋前面的元素
2. z-index不一樣時，優先顯示z-index屬性值大的元素

3.2 浮動的邊界

浮動會使得元素脫離文檔流，儘量地向左上(float:left)或右上(float:right)浮動,然而你浮動歸浮動，那你何時纔會中止浮動呢？這個就是咱們接下來要討論的話題

3.2.1 飛不出如來佛祖的掌心

浮動元素不會超過它的父元素的邊界，下圖中紅色的浮動元素不會超過body父元素的邊界，藍色的浮動元素不會超過黃色的父元素

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>浮動的邊界</title>
    <style> body { background-color: antiquewhite; } .father { width: 200px; height: 200px; background-color: yellow; margin: 0 auto; } .box1 { float: left; width: 100px; height: 100px; background-color: red; } .box2 { float: right; width: 100px; height: 100px; background-color: aqua; } </style>
</head>
<body>
<div class="box1">

</div>
<div class="father">
    <div class="box2">

    </div>
</div>
</body>
</html>
複製代碼

3.2.2 不能超隊

浮動元素在浮動過程當中遇到其餘浮動元素就要中止浮動，這個時候的隊伍就像在排隊同樣

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>測試浮動佈局</title>
    <style> .box1 { float: left; width: 100px; height: 100px; background-color: aqua; } .box2 { float: left; width: 100px; height: 100px; background-color: red; } .box3 { float: left; width: 100px; height: 100px; background-color: black; } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
複製代碼

如下是一行浮動元素的溢出狀況，能夠看到它們在一行裝不下的時候會進行換行浮動

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不能超隊</title>
    <style> .box { float: left; width: 100px; height: 100px; background-color: aqua; border: 1px solid black; } </style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
複製代碼

在如下示例中，三塊元素都是浮動元素，前兩塊向左浮動，黑色的向右浮動，你會發現即便第一行有足夠的空間，可是第三塊黑色的浮動元素就是上不去，緣由仍是那句話不能插隊，也就是不能超過兄弟元素

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不能超隊</title>
    <style> .box1 { float: left; width: 600px; height: 100px; background-color: aqua; } .box2 { float: left; width: 600px; height: 100px; background-color: yellow; } .box3 { float: right; width: 100px; height: 100px; background-color: black; } </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
複製代碼

3.2.3 被牆了

浮動元素不能超過前面的文檔流塊狀元素，咱們查看示例代碼，能夠發現浮動元素在源代碼中的結構位於文檔流塊狀元素以後，解決辦法能夠將它們在代碼結構上交換位置便可

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>被牆了</title>
    <style> .box1 { height: 100px; background-color: yellow; } .box2 { float: left; width: 100px; height: 100px; background-color: aqua; } </style>
</head>
<body>
    <div class="box1"> // 文檔流塊狀元素

    </div>
    <div class="box2"> // 浮動元素

    </div>
</body>
</html>
複製代碼

交換位置以後的效果以下

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>交換位置</title>
    <style> .box1 { height: 100px; background-color: yellow; } .box2 { float: left; width: 100px; height: 100px; background-color: aqua; } </style>
</head>
<body>
    <div class="box2"> // 浮動元素

    </div>
    <div class="box1"> // 文檔流塊狀元素

    </div>
</body>
</html>
複製代碼

最後讓咱們來總結一下浮動的邊界：

浮動的元素飛不出如來佛祖的掌心，這裏的如來佛祖指的是它的父元素
浮動元素之間得排好隊，不能隨便插隊
浮動元素不能前面的文檔流塊狀元素

3.3 元素變性

在以前咱們有詳細介紹過元素在文檔流中的性質，而後，元素在脫離文檔流以後性質會發生很大的改變，接下來就讓咱們來看看元素都發生了哪些改變，咱們將分別從塊元素和內聯元素提及

3.3.1 塊狀元素

塊狀元素在文檔流中的特色：獨佔一行，寬度爲父元素的100%，高度被內容撐開

塊狀元素浮動以後的特色：寬度和高度都被內容撐開，可是能夠設置寬和高

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素變性</title>
    <style> .box1 { background-color: aqua; } .box2 { float: left; background-color: yellow; } </style>
</head>
<body>
<div class="box1">a</div>
<div class="box2">a</div>
</body>
</html>
複製代碼

3.3.2 內聯元素

內聯元素在文檔流中的特色：不能設置寬度和高度，寬度和高度都被內容撐開

內聯元素浮動以後的特色：能夠設置寬度和高度，寬度和高度依舊是被內容撐開

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素變性</title>
    <style> .span1 { width: 100px; height: 100px; background-color: yellow; } .span2 { float: left; width: 100px; height: 100px; background-color: aqua; } </style>
</head>
<body>
<span class="span1">a</span>
<span class="span2">a</span>
</body>
</html>
複製代碼

最後讓咱們總結一下元素的變性：

浮動以後，會改變元素的在文檔流中的性質，無論是塊狀元素仍是內聯元素，最終都會變成一個塊狀元素和內聯元素的綜合體：不獨佔一行，能夠設置寬和高，寬高默認被內容撐開

4. 反作用-清除浮動

任何東西都有好與壞，咱們以前瞭解了那麼多浮動元素的特色，也瞭解了由於浮動帶來的種種變化，然而變化歸變化，它也會帶來一些問題，這些問題就是咱們接下來要解決的所謂的反作用，在這裏咱們只講一個最重要的反作用，解決了它在咱們的平常開發中就不會有太大問題了，至於其餘反作用，我的建議，你只要慢慢從實踐中體會積累就好了

4.1 高度塌陷

浮動具備反作用-高度塌陷，通常咱們須要手動的消除浮動帶來的反作用

舉一個實際的例子，浮動常常用在導航欄的佈局中,例如如下的水滴微信平臺的導航欄，其中的導航選項很明顯都採用了浮動佈局。

咱們先使用瀏覽器的審查功能來看下清除浮動以後的，也就是正常的效果，咱們能夠看到此時的header佔據的大小爲下圖中的陰影部分，將浮動元素(導航選項)包裹在裏面，也就是沒有由於浮動失調父元素的高度

而在咱們去掉浮動以後，咱們能夠發現header的高度變爲了圖中的那麼一小塊陰影，沒有將浮動元素(導航選項)包裹在裏面，浮動元素的父元素header失去了原有的高度，這就是咱們如今討論的高度塌陷問題

高度塌陷會帶來不少問題，最明顯的就是會影響頁面的佈局，例如以上例子中，當我發生在導航欄發生高度塌陷以後，就會致使下方的頁面元素集體上移，甚至會覆蓋導航欄

如下是正常的佈局，能夠發現下面陰影部分的佈局沒有影響導航欄

如下是發生高度塌陷的佈局，能夠發現導航欄被下面的佈局影響

4.2 解決方案

咱們管高度塌陷的解決方案稱做清除浮動，也就是清除浮動帶來的反作用

如下是未進行浮動以前，沒有發生高度塌陷

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>高度塌陷以前</title>
    <style> .box { border: 5px solid black; } .float-child { width: 100px; height: 100px; background-color: aqua; } .others { height: 100px; background-color: yellow; } </style>
</head>
<body>
    <div class="box">
        <div class="float-child">

        </div>
    </div>
    <div class="others">

    </div>
</body>
</html>
複製代碼

這是咱們進行浮動以後的狀況，你能夠看到在元素浮動以後對咱們的佈局產生了反作用，浮動元素的父元素髮生了高度塌陷，只留下黑色的邊框，下方的佈局往上偏移

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>發生高度塌陷</title>
    <style> .box { border: 5px solid black; } .float-child { float: left; // 浮動 width: 100px; height: 100px; background-color: aqua; } .others { height: 100px; background-color: yellow; } </style>
</head>
<body>
    <div class="box">
        <div class="float-child">

        </div>
    </div>
    <div class="others">

    </div>
</body>
</html>
複製代碼

接下來是咱們成功清除浮動帶來的反作用以後的例子，咱們能夠發現父元素的高度塌陷沒有了，彷彿父元素被裏面的浮動元素撐開同樣。

這個清除浮動方法的關鍵在於如下這個結論的應用：

一個元素的高度老是由最後一個非浮動子元素絕定的，至於其中原理，能夠本身去實踐一下，不少時候關於前端並無那麼多爲何，大部分時候咱們只要記住怎樣作最好就能夠了

爲何說下面這個清除浮動的方法是最好的呢？首先咱們評判一個解決方法的好壞的標準是：能解決原有的問題，不會帶來新的問題。如下這個方法既解決了高度塌陷的問題嗎，又經過:after僞類解決了語義化的問題，很好地符合以上的標準。而且在實際開發中，如下這種方法也是咱們用的最多的一種。

/*清除浮動*/
.float-father:after {
    content: "";
    display: block;
    clear: both;
}
複製代碼

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>解決高度塌陷</title>
    <style> .float-father { border: 5px solid black; } /*清除浮動*/ .float-father:after { content: ""; display: block; clear: both; } .float-child { float: left; width: 100px; height: 100px; background-color: aqua; } .others { height: 100px; background-color: yellow; } </style>
</head>
<body>
<div class="float-father">
    <div class="float-child">

    </div>
</div>
<div class="others">

</div>
</body>
</html>
複製代碼

總結，在對元素實施浮動操做以後，必定要考慮清除浮動帶來的反作用-高度塌陷

5. 實戰-最佳實踐

行之踐，則無敵，接下來就讓咱們動手實踐一個簡單的頁面佈局

示例代碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>最佳實踐</title>
    <style> ul { /*取出列表的默認樣式*/ list-style: none; } li { /*爲導航項設置向左浮動*/ float: left; /*將行高設置成與父元素同樣高，能夠實現垂直居中的效果*/ line-height: 50px; } /*清除浮動*/ .fn-clear:after { content: ""; display: block; clear: both; } li span { /*設置選項元素的內邊距*/ padding: 6px 13px; } #header { /*設置header的高度爲50px*/ height: 50px; /*設置header的背景顏色*/ background-color: aqua; } #body-left { /*設置body-left向左浮動*/ float: left; /*設置寬度爲父元素寬度的20%*/ width: 20%; /*設置高度*/ height: 500px; /*設置背景顏色*/ background-color: aquamarine; } #body-center { /*設置body-center向左浮動*/ float: left; /*設置寬度爲父元素寬度的20%*/ width: 60%; /*設置高度*/ height: 500px; /*設置背景顏色*/ background-color: aliceblue; } #body-right { /*設置body-right向左浮動*/ float: left; /*設置寬度爲父元素寬度的20%*/ width: 20%; /*設置高度*/ height: 500px; /*設置背景顏色*/ background-color: aquamarine; } #footer { /*設置footer的高度*/ height: 80px; /*設置footer的背景顏色*/ background-color: antiquewhite; } </style>
</head>
<body>
<div id="header" class="fn-clear">
    <ul>
        <li><span>導航</span></li>
        <li><span>導航</span></li>
        <li><span>導航</span></li>
        <li><span>導航</span></li>
        <li><span>導航</span></li>
        <li><span>導航</span></li>
    </ul>
</div>
<div id="body" class="fn-clear">
    <div id="body-left"></div>
    <div id="body-center"></div>
    <div id="body-right"></div>
</div>
<div id="footer">

</div>
</body>
</html>
複製代碼