本文檔學習參考至:詳解 清除浮動 的多種方式（clearfix）
浮動會導致什么影響：元素脫標，不占據父元素的空間，導致頁面布局出現問題，因此需要清除浮動帶來的影響
下邊通過以下例子進行解釋
首先在頁面設置一個box（div元素）包括兩個content（div元素），content大小不同便於浮動的時候觀察
<style>
.box1 {
background-color: yellow;
}
.box2 {
background-color: blue;
}
.content1 {
width: 100px;
height: 100px;
background-color: green;
}
.content2 {
width: 120px;
height: 120px;
background-color: red;
}
</style>
<div class="box1">
<div class="content1">content1</div>
</div>
<div class="box2">
<div class="content2">content2</div>
</div>
若為content1設置float：left，則content1浮動，但由於元素處於左邊，所以content1在頁面位置不受影響
而box1高度本來為content1內容撐開的高度，但由於content1浮動，導致元素脫標，故box1高度變成0
而box2會由於box1高度變為0而移動到box1位置導致兩個box重合，
但由於content2的內容不會隨由於content1浮動原因而往上，故content2內容在content1容器的下邊
效果如下
從圖上可以很直接看出了由於浮動導致的問題，content2的布局收到了content1的影響
那么如何清除浮動對頁面布局的影響呢
有以下幾種方式
方法1：為浮動的父元素添加高度
簡單粗暴但不推薦，因為在實際的開發過程中，很多元素無法確定高度。
實例：為box1添加高度為100px，使其高度為content1高度
方法二：在父元素中添加子元素，並為添加的子元素中添加clear，清除浮動
clear是css中用來清除元素浮動的，具體有四個值：
1、none
默認值，不做任何清除浮動的操作
2、left
清除前面元素左浮動帶來的影響
3、right
清除前面元素右浮動帶來的影響
4、both
清除前面元素所有浮動帶來的影響
具體實例(一些樣式不再重復寫，都是同一個例子就是了，最終效果圖也如上所示，清除完浮動了)
<style>
.clearfix {
clear: both;
}
</style>
<div class="box1"> <div class="content1">content1</div> <div class="clearfix"></div> </div> <div class="box2"> <div class="content2">content2</div> </div>
方法三：為content2或者box2也添加浮動
emm，獨樂樂不如眾樂樂，所以一起浮動就不會有了，但是不推薦，不可能所有元素都浮動，這樣子頁面會更難以維護管理
（ 具體實例就不寫了，怎么實現大家也很一定都懂了）
方法四：為父元素添加overflow屬性，取值可為：hidden或者auto
但存在缺陷：若content中內容超過父元素會被隱藏或者顯示滾動條
實例，即為box1添加overflow:hidden或者overflow:auto，這里content內容多主要為了模擬超出范圍時頁面的表現情況
<div class="box1"> <div class="content1">content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1content1</div> </div> <div class="box2"> <div class="content2">content2</div> </div>
設置overflow:hidden時頁面效果
設置overflow:auto頁面效果
方法五：
父元素設置display:table
優勢：不影響結構與表現的分離，語義化正確，代碼量少
弊端：盒模型屬性已經改變，會造成其他問題
（以上摘抄至參考文檔，主要是本人對於table使用了解較少，日后有感悟再補充）
方法六：使用:before添加到box2元素中或者:after添加到box1中
目前較常用的解決float方式（至少本人是這樣的，嘻嘻）
使用方式:
<style>
.box1:after {
content: "";
display: block;
clear: both;
}
.box2:before {
content : "";
display: block;
clear: both;
}
</style>
暫時就這么多了，還有一個BFC看看再補充，學藝不精，唉