整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
程序員web前端學習路線分享CSS浮動-清除浮動篇，為什么要清除浮動
這里所說的清除浮動，并不是不要浮動了，而是清除浮動與浮動之間的影響。那么到底會有什么影響呢？
1．高度塌陷
舉個例子我們看一下。
我們在這里設置了div0是外容器，div1是內部容器，div1因為設置了寬高是100，所以顯示的時候就是一個橙色的100*100的方塊，但是div0僅設置了背景色，因為div特有的獨占一行，寬度會自動100%，高度被內部容器div1撐開了，撐開的高度是100像素，所有看到一個綠色高100像素，寬度100%的容器
現在我們給div1設置浮動
這時候我們發現div0這個外容器沒了，看不見了。。別急，我們在div0里打一些字看看
我們發現aaa這些文字出來了，環繞在橙色方塊周圍了，這個原因在浮動中我們已經講解了，而且我們也發現綠色的容器也出來了，但是它的高度僅僅是文字的行高。這就說明，內部的橙色塊設置浮動后，它的父級容器綠色塊就不知道橙色容器的高度了，因此綠色容器的高度變成了0，寫入文字后，綠色容器重新被撐開高度才可以看到。我們把這種情況稱為高度塌陷。
我們其實是希望一個容器中的內容不斷的撐開容器的高度，這樣我們后續的內容就可以緊貼在上面了，而網頁中的內容并不是都是靜態的，很多都需要每天更新，更新的內容多少，圖片高度，都不相同。那么后面的東西想要緊貼上面的內容，上面內容的高度就不能設置一個固定數值，否則很多數據的時候放不下。如果不設置高度，一旦設置浮動后，就會出現高度塌陷。丟失了高度后，頁面后續的內容就會插在上面內容的底部，頁面就會錯亂，因此我們就需要做清除浮動來解決這個問題，最終做到即使使用浮動，外容器也會因為內容的多少自動撐開高度，不會高度塌陷。
margin padding設置值不能正確顯示
2．Margin和padding屬性值不正確
由于浮動導致父級子級之間設置了css padding、css margin屬性的值不能正確表達。特別是上下邊的padding和margin不能正確顯示。
要來解決這個問題，我們就必須來認識一下BFC
什么是BFC
要來理解BFC，先介紹一下Box和Formatting Context
Box 是 CSS 布局的對象和基本單位， 簡單來說頁面就是由Box組成，元素的類型和 display 屬性，決定了這個 Box 的類型。 不同類型的 Box， 會參與不同的 Formatting Context（一個決定如何渲染文檔的容器），因此Box內的元素會以不同的方式渲染。
1、block-level box:display 屬性為 block, list-item, table 的元素，會生成 block-level box。并且參與 block formatting context；
2、inline-level box:display 屬性為 inline, inline-block, inline-table 的元素，會生成 inline-level box。并且參與 inline formatting context；
3、run-in box: css3 中才有， 這兒先不講了。
Formatting context 是 W3C CSS2.1 規范中的一個概念。它是頁面中的一塊渲染區域，并且有一套渲染規則，它決定了其子元素將如何定位，以及和其他元素的關系和相互作用。最常見的 Formatting context 有 Block fomatting context (簡稱BFC)和 Inline formatting context (簡稱IFC)。
BFC(Block formatting context)直譯為"塊級格式化上下文"。它是一個獨立的渲染區域，只有Block-level box參與， 它規定了內部的Block-level Box如何布局，并且與這個區域外部毫不相干。
BFC布局規則：
（1）內部的Box會在垂直方向，一個接一個地放置。
（2）Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發生重疊
（3）每個元素的margin box的左邊， 與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
（4）BFC的區域不會與float box重疊。
（5）BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之也如此。
（6）計算BFC的高度時，浮動元素也參與計算
瞧，最后一條就是我們需要利用的了，我們只需要利用BFC就可以解決浮動后外容器高度塌陷的問題
如何生成BFC
1. 根元素是BFC模式
這種不能考慮，因為都不是根元素
2. 設置高度
顯然也是不可以的。
3. float屬性不為none
本來就要設置浮動的。所以也不考慮
4. position為absolute或fixed
這樣設置后，就失去浮動的意義了。因此也不使用
5. display為inline-block, table-cell, table-caption, flex, inline-flex
雖然可以開啟，但是導致父元素原有寬度丟失
6. overflow不為visible
這種方法副作用比較小，但是還是有問題的。比如overflow設置為hidden，這個不行，內容的高度是撐開的寬度也不能確定。設置為scroll，會出現右邊和下邊的滾動條寬度
設置為auto最合適，不過，如果里面的內容使用了定位，并且超出去就會出現滾動條。所以只能保證內容不能有定位。
Clear:both
清除：兩者間，顧名思義就是清除浮動
我們看到如果要使用clear:both，就需要給高度塌陷的容器里面最后追加一個div，并且給這個div設置為clear：both，我們發現這種使用方法比較麻煩，每次設置都需要最后增加div。
因此我們做了一個修改
<!DOCTYPE html>
一篇文章我們把「Web前端開發進階篇」CSS框模型講解完了，接著我們來講解下一篇文章，關于CSS定位的內容知識，小伙伴們跟上我的節奏，動起來，Let's go！
【引言】
CSS定位思想很簡單，就是讓你定義的元素框相對于其正常位置應該出現的位置，相對于父元素、另一個元素甚至是瀏覽器窗口的位置。浮動不是完全定位，不過，它也不是正常流布局。在我們切頁面的過程中，定位和浮動是經常用，用不好，就會出現頁面在不同瀏覽器的兼容性問題。我會在下面的文章中詳細說明。
CSS定位
CSS有三種定位機制：普通流、浮動和絕對定位。
除非專門指定，否則所有框都在普通流中定位。也就是說，普通流中的元素的位置由元素在 (X)HTML 中的位置決定。
塊級框從上到下一個接一個地排列，框之間的垂直距離是由框的垂直外邊距計算出來。
行內框在一行中水平布置。可以使用水平內邊距、邊框和外邊距調整它們的間距。但是，垂直內邊距、邊框和外邊距不影響行內框的高度。由一行形成的水平框稱為行框（Line Box），行框的高度總是足以容納它包含的所有行內框。不過，設置行高可以增加這個框的高度。
通過position屬性我們可以選擇4中不同類型的定位。
1、position：static
元素框正常生成。塊級元素生成一個矩形框，作為文檔流的一部分，行內元素則會創建一個或多個行框，置于其父元素中。
2、position：relative
元素框偏移某個距離。元素仍保持其未定位前的形狀，它原本所占的空間仍保留。
3、position：absolute
元素框從文檔流完全刪除，并相對于其包含塊定位。包含塊可能是文檔中的另一個元素或者是初始包含塊。元素原先在正常文檔流中所占的空間會關閉，就好像元素原來不存在一樣。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
4、position：fixed
元素框的表現類似于將 position 設置為 absolute，不過其包含塊是視窗本身。
提示：相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
CSS 定位屬性允許你對元素進行定位。
position：把元素放置到一個靜態的、相對的、絕對的、或固定的位置中。
top：定義了一個定位元素的上外邊距邊界與其包含塊上邊界之間的偏移。
right：定義了定位元素右外邊距邊界與其包含塊右邊界之間的偏移。
bottom：定義了定位元素下外邊距邊界與其包含塊下邊界之間的偏移。
left：定義了定位元素左外邊距邊界與其包含塊左邊界之間的偏移。
overflow：設置當元素的內容溢出其區域時發生的事情。
clip：設置元素的形狀。元素被剪入這個形狀之中，然后顯示出來。
vertical-align：設置元素的垂直對齊方式。
z-index：設置元素的堆疊順序。
了解了這些屬性后，下面我們詳細的說說相對定位和絕對定位。
相對定位是一個非常容易掌握的概念。如果對一個元素進行相對定位，它將出現在它所在的位置上。然后，可以通過設置垂直或水平位置，讓這個元素“相對于”它的起點進行移動。
如果將 top 設置為 20px，那么框將在原位置頂部下面 20 像素的地方。如果 left 設置為 30 像素，那么會在元素左邊創建 30 像素的空間，也就是將元素向右移動。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}如下圖所示：
相對定位
注意，在使用相對定位時，無論是否進行移動，元素仍然占據原來的空間。因此，移動元素會導致它覆蓋其它框。
絕對定位使元素的位置與文檔流無關，因此不占據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對于它在普通流中的位置。
普通流中其它元素的布局就像絕對定位的元素不存在一樣：
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}如下圖所示：
絕對定位
絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。
對于定位的主要問題是要記住每種定位的意義。所以，現在讓我們復習一下學過的知識吧：相對定位是“相對于”元素在文檔中的初始位置，而絕對定位是“相對于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相對于”最初的包含塊。
注釋：根據用戶代理的不同，最初的包含塊可能是畫布或 HTML 元素。
提示：因為絕對定位的框與文檔流無關，所以它們可以覆蓋頁面上的其它元素。可以通過設置 z-index 屬性來控制這些框的堆放次序。
浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
由于浮動框不在文檔的普通流中，所以文檔的普通流中的塊框表現得就像浮動框不存在一樣。
請看下圖，當把框 1 向右浮動時，它脫離文檔流并且向右移動，直到它的右邊緣碰到包含框的右邊緣：
右浮動
再請看下圖，當框 1 向左浮動時，它脫離文檔流并且向左移動，直到它的左邊緣碰到包含框的左邊緣。因為它不再處于文檔流中，所以它不占據空間，實際上覆蓋住了框 2，使框 2 從視圖中消失。
如果把所有三個框都向左移動，那么框 1 向左浮動直到碰到包含框，另外兩個框向左浮動直到碰到前一個浮動框。
左浮動
如下圖所示，如果包含框太窄，無法容納水平排列的三個浮動元素，那么其它浮動塊向下移動，直到有足夠的空間。如果浮動元素的高度不同，那么當它們向下移動時可能被其它浮動元素“擋住”：
左浮動
通過 float 屬性實現元素的浮動。因此，我們可以創建浮動框可以使文本圍繞圖像：
文本圍繞圖像
要想阻止行框圍繞浮動框，需要對該框應用 clear 屬性。clear 屬性的值可以是 left、right、both 或 none，它表示框的哪些邊不應該挨著浮動框。
為了實現這種效果，在被清理的元素的上外邊距上添加足夠的空間，使元素的頂邊緣垂直下降到浮動框下面：
清除浮動
這是一個有用的工具，它讓周圍的元素為浮動元素留出空間。
讓我們更詳細地看看浮動和清理。假設希望讓一個圖片浮動到文本塊的左邊，并且希望這幅圖片和文本包含在另一個具有背景顏色和邊框的元素中。您可能編寫下面的代碼：
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>這種情況下，出現了一個問題。因為浮動元素脫離了文檔流，所以包圍圖片和文本的 div 不占據空間。
如何讓包圍元素在視覺上包圍浮動元素呢？需要在這個元素中的某個地方應用 clear：
不幸的是出現了一個新的問題，由于沒有現有的元素可以應用清理，所以我們只能添加一個空元素并且清理它。
.news {
background-color: gray;
border: solid 1px black;
}
.news img {
float: left;
}
.news p {
float: right;
}
.clear {
clear: both;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>這樣可以實現我們希望的效果，但是需要添加多余的代碼。常常有元素可以應用 clear，但是有時候不得不為了進行布局而添加無意義的標記。
不過我們還有另一種辦法，那就是對容器 div 進行浮動：
.news {
background-color: gray;
border: solid 1px black;
float: left;
}
.news img {
float: left;
}
.news p {
float: right;
}
<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>這樣會得到我們希望的效果。不幸的是，下一個元素會受到這個浮動元素的影響。為了解決這個問題，有些人選擇對布局中的所有東西進行浮動，然后使用適當的有意義的元素（常常是站點的頁腳）對這些浮動進行清理。這有助于減少或消除不必要的標記。
CSS定位今天就講解到這里了，下一篇講解CSS選擇器，希望大家不要放棄學習哦！
PS：
本文為‘Web前端進階指南’原創，手動碼字不易，小伙伴們別忘了順手點個贊加個關注哈，有什么不懂的下方留言評論或私信。謝謝大家哈！
本章目標：
標準文檔流：指元素根據塊元素或行內元素的特性按從上到下，從左到右的方式自然排列。這也是元素默認的排列方式
標準文檔流組成
display屬性
在這里插入圖片描述
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
