一、起因：
子盒子設置浮動之后效果：
由此可見，藍色的盒子設置浮動之后，因為脫離了標准文檔流，它撐不起父盒子的高度，導致父盒子高度塌陷。如果網頁中出現了這種問題，會導致我們整個網頁的布局紊亂
二、解決方案：
- 父盒子設置固定高度------------------給父元素添加固定的高度
- 內牆法 -------------------------------在父元素的后面添加一個空的div添加樣式為 clear:both
- 偽元素清除法-------------------------給父元素類名添加一個類叫 clearfix （推薦）
- overflow:hidden---------------------給父元素樣式添加 overflow:hidden
（1）父盒子設置固定高度
雖然，給父盒子設置了固定高度能暫時解決我們的問題，但是它的使用不靈活，如果未來子盒子的高度需求發生了改變(網頁的多處地方)，那么我們得手動需要更改父盒子的高度。后期不易維護。
應用：網頁中盒子固定高度區域，比如固定的導航欄。
缺點：使用不靈活，后期不易維護
（2）內牆法
在浮動元素的后面加一個空的塊級元素(通常是div),並且該元素設置 clear:both；屬性。clear屬性，字面意思就是清除，那么both,就是清除浮動元素對我左右兩邊的影響。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動元素的破壞性</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
} .clearfix{ clear: both;
}
</style>
</head>
<body>
<div class="father">
<div class="child">兒子</div>
<div class="clearfix"></div>
</div>
</body>
</html>
應用：網頁中應用不多，只是為了引導下一個清除浮動的方式。
缺點：結構冗余
（3）偽元素清除法
內牆法是在浮動元素的后面加一個空的塊級元素(通常是div),並且該元素設置clear:both；屬性。
表示在p標簽元素的最后面添加樣式，同時這也正好符合內牆法的用法。
代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮動元素的破壞性</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.child{
width: 200px;
height: 200px;
float: left;
background-color: green;
} .cleafix:after{
content:'.';
display: block;
clear: both;
overflow: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="child">兒子</div>
</div>
</body>
</html>
當以后需要清除浮動時只需要在標簽中再添加一個 “clearfix” 類就行，十分的方便快捷！
這也只不過是前一種清除浮動方法（添加空白div）的另一種變形，其底層邏輯也是完全一樣的。前面的三種方法，其本質上是一樣的 !
編寫的偽元素清除法內容解釋：
.clearfix:after{
content:''; 表示給.clearfix元素內部最后添加一個內容，該內容為行內元素。
display: block; 設置該元素為塊級元素，符合內牆法的需求。（有的地方使用table，因為table也是一個塊級元素）
clear: both; 清除浮動的方法。必須要寫
overflow: hidden; 如果用display:none;,那么就不能滿足該元素是塊級元素了。overflow:hidden;表示隱藏元素，但是該元素占位置；而display:none;不占位置。
height: 0;
}
此處梳理一下：after（偽類）和：：after（偽元素）的區別
相同點
-
- 都可以用來表示偽類對象，用來設置對象前的內容
- :before和::before寫法是等效的; :after和::after寫法是等效的，版本不同而已
不同點
-
- :before/:after是Css2的寫法，::before/::after是Css3的寫法
- :before/:after 的兼容性要比::before/::after好 ，
不過在H5開發中建議使用::before/::after比較好
注意
-
- 這些偽元素 要配合content屬性一起使用
- 這些偽元素 不會出現在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入
- 這些偽元素 的特效通常要使用:hover偽類樣式來激活
（4）overflow:hidden
CSS屬性overflow定義一個元素的內容太大而無法適應盒子的時候該做什么。它是overflow-x和overflow-y的簡寫屬性
overflow屬性不僅僅能實現以上效果，那么當一個元素設置了overflow:hidden|auto|scroll屬性之后，它會形成一個BFC區域，我們叫做它為塊級格式化上下文。
BFC只是一個規則。它對浮動定位都很重要。浮動定位和清除浮動只會應用於同一個BFC的元素。
浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。
優點：代碼簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，無法顯示要溢出的元素
總結：只要我們讓父盒子形成BFC的區域，那么它就會自動清除區域中浮動元素帶來的影響。
哪些會形成BFC區域：
