前言
相信很多同學(xué)在網(wǎng)頁布局過程中都用過float浮動布局，float可以讓我們很方便的去布局镐作，但是同時也帶來了很多的問題，雖然現(xiàn)在很多人都推薦用Flex布局來替代浮動布局（不了解Flex可以在這里看這里 阮一峰的網(wǎng)絡(luò)日志）粪摘，但是IE11以下和一些低級別版本的瀏覽器對Flex的支持不太好击喂，所以我們用好浮動布局還是很有必要的。這篇文章主要解決的是float的所引起的父容器高度塌陷問題论笔，相信很多人都遇到過使用浮動時發(fā)現(xiàn)父容器沒有撐開采郎，以下我會給出幾種解決方法千所，讓大家不會在這個問題上再出錯。
首先蒜埋，我們先看一個簡單的例子淫痰，看看什么是父元素高度塌陷
<style>
.content{
background-color: rgba(102, 102, 102, 0.35);
}
h1,p{
/*float:left;*/
}
p{
margin-top: 1rem;
font-size: 1rem;
}
</style>
<body>
<div class="content">
<h1>沉默的大多數(shù)</h1>
<p> 我現(xiàn)在寫的東西大體屬于文學(xué)的范疇，所謂文學(xué)理茎，在我看來就是：先把文章寫好看了再說黑界，別的就不用管他媽的。除了文學(xué)皂林，
我想不到有什么地方可以接受我這些古怪想法朗鸠。賴在文學(xué)上，可以給自己在圈子中找到一個立腳點(diǎn)础倍。有這樣一個立腳點(diǎn)烛占，就可以攻擊這個圈子，攻擊整個陽的世界沟启。</p>
<p>幾年前忆家，我在美國讀書。有個洋鬼子這樣問我們：你們中國那個陰陽學(xué)說德迹，怎么一切好的東西都屬陽芽卿，一點(diǎn)不給陰剩下？當(dāng)然胳搞，她這樣發(fā)問卸例，是因為她正是一個五體不全之陰人。但是這話也有些道理肌毅。話語權(quán)屬于陽的一方筷转，它當(dāng)然不會說陰的一方任何好話。就是夫子也未能免俗悬而，他把婦女和小人攻擊了一通呜舒。這句話幾千年來總被人引用，但我就沒聽到受攻擊一方有任何回應(yīng)笨奠。人們只是小心提防著不要做小人袭蝗，
至于怎樣不做婦人，這問題一直沒有解決般婆。就是到了現(xiàn)代呻袭，女變男的變性手術(shù)也是一個難題，而且也不宜推廣——這世界上假男人太多腺兴，真男人就會找不到老婆左电。</p>
</div>
</body>
我為<code>h1</code><code>p</code>設(shè)置了一個父元素<code>div</code>，為了方便看到父元素，我設(shè)置了一個背景色篓足，好段誊，到目前為止，我們的頁面沒有任何問題栈拖，當(dāng)我們?yōu)?lt;code>div</code>的子元素<code>h1</code><code>p</code>設(shè)置float的時候连舍，
h1,p{
float:left;
}
頁面將出現(xiàn)如下問題：
可以很明顯的看到背景沒有了，父容器的高度變?yōu)?px了涩哟，這是為什么呢索赏？因為元素浮動之后，周圍的元素會重新排列贴彼，按照姜維老師的話就是潜腻，浮動的元素就跟浮云一樣，不會影響到我們地面上的人類（未浮動的元素）器仗，人類怎么排列和漂浮的云沒有關(guān)系融涣。
好了，現(xiàn)在浮動引起了問題精钮，并且這種問題并不是我們想要的結(jié)果威鹿，所以我們現(xiàn)在要解決這種問題，讓父元素表現(xiàn)一個正常的高度轨香，我們現(xiàn)在提供五種方法去解決問題：
-
一忽你，在父元素底部加一行代碼
<body>
<div class="content">
<h1>沉默的大多數(shù)</h1>
<p> 我現(xiàn)在寫的東西大體屬于文學(xué)的范疇，所謂文學(xué)臂容，在我看來就是：先把文章寫好看了再說檀夹，別的就不用管他媽的。除了文學(xué)策橘，
我想不到有什么地方可以接受我這些古怪想法。賴在文學(xué)上娜亿，可以給自己在圈子中找到一個立腳點(diǎn)丽已。有這樣一個立腳點(diǎn)，就可以攻擊這個圈子买决，攻擊整個陽的世界沛婴。</p>
<p>幾年前，我在美國讀書督赤。有個洋鬼子這樣問我們：你們中國那個陰陽學(xué)說，怎么一切好的東西都屬陽，一點(diǎn)不給陰剩下溃睹？當(dāng)然口予，她這樣發(fā)問，是因為她正是一個五體不全之陰人。但是這話也有些道理羹奉。話語權(quán)屬于陽的一方秒旋，它當(dāng)然不會說陰的一方任何好話。就是夫子也未能免俗诀拭，他把婦女和小人攻擊了一通迁筛。這句話幾千年來總被人引用，但我就沒聽到受攻擊一方有任何回應(yīng)耕挨。人們只是小心提防著不要做小人细卧，
至于怎樣不做婦人，這問題一直沒有解決筒占。就是到了現(xiàn)代贪庙，女變男的變性手術(shù)也是一個難題，而且也不宜推廣——這世界上假男人太多赋铝，真男人就會找不到老婆插勤。</p>
<div style="clear:both;"></div>
</div>
</body>
我們在父元素底部增加了一行空的<code>div</code>標(biāo)簽，并且為其設(shè)置了樣式
<code>clear:both;</code>,以下是修改后的效果：
這種方法通俗易懂革骨，也容易掌握农尖。
但是缺點(diǎn)是添加了無意義的空標(biāo)簽，違背了結(jié)構(gòu)表現(xiàn)分離良哲，給后期維護(hù)帶來了問題盛卡。
-
二，給父元素增加一行CSS
div.content{
float:left;
}
這個意思就比較直白了筑凫，讓父元素也一起浮動滑沧，父元素和子元素又一起排列了，所以父元素高度就可以恢復(fù)了巍实，但是這很明顯是一種將錯就錯的方法滓技，父元素本來就不需要浮動，為了解決高度問題讓父元素浮動又會引發(fā)其他問題棚潦。
-
三令漂，利用BFC來給父元素增加CSS
div.content{
overflow:auto;
}
上面只是一種做法，你還可以加<code>display:table-cell;</code>或<code>display:table-caption;</code>或<code>display:inline-block;</code>或<code>position:fixed;</code>或<code>position:absolute</code>等等丸边，你要問我為什么它們可以清除浮動叠必，其實(shí)這些都是觸發(fā)了BFC（塊級格式化上下文），具體的我不解釋了妹窖，大家可以看看這篇文章BFC神器背后的原理
-
四纬朝，使用CSS中的after偽元素
給父元素div添加一個clearfix的class類,<code><div class="content clearfix"></code>,然后設(shè)置CSS
.clearfix:after{
content: ".";
display: block;
height: 0px;
clear: both;
visibility: hidden;
}
這種方法其實(shí)有點(diǎn)類似于第一種方法，不過這種方法是通過after偽元素來給父元素末尾添加一個看不見的<code>clear:both;</code>的塊元素骄呼，來達(dá)到清除浮動的目的共苛。其中<code> content: ".";</code>是為了加一段內(nèi)容判没，<code>display: block;</code>是為了讓生成的元素以塊級元素顯示，占滿剩余空間俄讹，<code>height: 0px;</code>是為了避免生成的內(nèi)容避免原有布局的高度哆致， <code> visibility: hidden;</code>是為了讓生成的元素不可見。
-
五患膛，更優(yōu)雅的改進(jìn)——尼古拉斯大師方法
.clearfix:after,
.clearfix:before{
content: " ";
display: table;
}
.clearfix:after{
clear: both;
}
上述代碼把display設(shè)置為table摊阀，可以創(chuàng)建一個匿名的表格單元，這個匿名的表格單元可以直接觸發(fā)BFC踪蹬，然后再直接設(shè)置<code>content: " ";</code>胞此，把內(nèi)容設(shè)置為一個空格，這樣就節(jié)省了不必要的代碼跃捣。
那加before偽元素是為了什么呢漱牵？加上before對于清除浮動沒有什么必要性，主要目的是防止瀏覽器頂部的空白崩潰疚漆，即是指此盒子的margin-top與上一個盒子的margin-bottom會發(fā)生折疊酣胀，（在同一個BFC中兩個毗鄰的塊級盒子在垂直方向（和布局有關(guān)系）的margin會發(fā)生折疊）。
現(xiàn)在大多數(shù)人都會采用最后一種方式來清除浮動娶聘，如果你還沒有使用闻镶，建議快點(diǎn)學(xué)會哦，或者可以推薦給你的朋友丸升，一分鐘就可以掌握哦铆农！覺得有用不妨點(diǎn)個贊吧！
參考資料：姜維_Wayne-《所向披靡的響應(yīng)式開發(fā)》
