1、浮動產生的背景
1-1、爲什麼會出現浮動呢？
浮動最初出現的時候只是爲了實現文字環繞圖片的效果。並沒有想過它可以應用於我們現在的頁面佈局中。
1-2、文字環繞圖片的原理
元素設置浮動之後，破壞了其inline boxes模型，失去了高度，使得其他inline boxes可以圍繞浮動元素重新排列。
2、浮動的本質
浮動的本質就是包裹性和破壞性。下邊詳細解釋什麼是包裹性，什麼是破壞性：
2-1、包裹性
元素的包裹性就是說父元素的width值會收縮到與內部元素寬度一樣，包裹只是讓元素的水平空間收縮。
常見的具有包裹性的元素：absolute、fixed、float、inline-block、inline-flex、table-cell；這些元素都有一個共同的特性：會產生BFC（塊級格式化上下文）。【至於什麼是BFC，請查看：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context 】
舉個例子來說：div標籤，是一個塊級元素，當我們沒有給該元素設置float:left/right時，它默認的寬度值是100%，即獨佔一行；但是，如果我們設置了float屬性之後，它的寬度值就會與其包裹的內部元素的寬度值一樣。
具體效果如下：
1>、沒有設置float屬性時
#parent {
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
}
img {
width: 30px;
height: 30px;;
}
<div id="parent">
<img src="test.png" alt="...">
<span class="c">當父元素div沒有浮動時</span>
</div>
2>、設置float屬性時
#parent {
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
float: left;
}
img {
width: 30px;
height: 30px;;
}
<div id="parent">
<img src="test.png" alt="...">
<span class="c">當父元素div浮動時</span>
</div>
2-2、破壞性
破壞性就是指破壞了元素的line boxes。要想理解破壞性，我們只要搞清楚文字可以環繞圖片的原理即可。要了解破壞性，我們首先需要掌握兩個知識點：line boxes和inline boxes。
2-2-1、什麼是inline boxes?
我理解的inline boxes指的就是我們常見的行級元素和文本內容；這些元素通常會排成一行，如span、input這些元素就是有名的inline boxes，文字內容就是匿名的inline boxes。
2-2-2、什麼是line boxes?
line boxes就是由inline boxes組合起來的行盒子。line boxes的高度值是由其內部最高的inline boxes的高度值決定的。
結合實際例子來說明：有兩個img標籤，height值分別爲60px和30px，line boxes的最大高度就是由其內部最高的inline boxes的高度值決定的。
#parent {
border: 1px solid #ccc;
padding: 20px;
margin: 20px;
}
#img1 {
width: 30px;
height: 30px;;
}
#img {
width: 60px;
height: 60px;
}
<div id="parent">
<img id="img" src='test.png'/>
<img id="img1" src="test.png" alt="...">
<span class="c">當父元素div沒有浮動時</span>
</div>
2-2-3、文字環繞圖片的原理
圖片和文字都屬於同一box類型的元素，默認情況下，一張圖片只能與一行文字對齊，如果想要讓一張圖片與多行文字對齊，我們只能破壞inline boxes模型了。
當給一個圖片元素設置了浮動之後，該元素本身的inline boxes模型被破壞，與文字就不屬於同一box類型了，這個時候，圖片會從line boxes模型中脫離出來，按照自己的方式排列；而line boxes由inline boxes組成，inline boxes模型被破壞之後，元素本身失去了其高度值，所以line boxes也就失去了高度值。
上述兩種結果的產生恰恰給文字環繞圖片創造了必要條件。
inline boxes是高度形成的基礎，浮動破壞了inline boxes模型，也就沒有高度可言了。正是由於浮動元素沒有了inline boxes，也就失去了高度，才能讓其他inline boxes元素重新整合，環繞浮動元素排列。
3、如何清除浮動產生的影響
3-1、使用空標籤清除浮動
這個做法的好處是兼容性強，但是添加了多餘的標籤，造成了浪費
<div class="clear"></div>
.clear {
clear: both/left/right;
height: 0;
overflow: hidden;
}
3-2、使用<br>空標籤清除浮動
與使用div標籤清除浮動的方式一樣
<br clear="both"/>
3-3、給父元素也設置浮動屬性
只是清除了當前浮動帶來的影響，但是會給與父元素同級的元素帶來新的影響，容易出問題
<div id="parent">
<div id="child"></div>
</div>
#parent {
float: left;
}
#child {
float: left;
}
3-4、設置父元素的display爲inline-block
導致父元素無法使用margin：0 auto；實現居中
3-5、overflow + zoom方法
overflow: hidden;會導致溢出的元素被截斷
.clearfix {
overflow: hidden;
zoom: 1;
}
3-6、使用after僞類清除浮動
推薦做法
.clearfix{
zoom: 1;
}
.clearfix:after {
display: block;
content: 'clear';
clear: both;
line-height: 0;
visibility:hidden;
}
推薦閱讀：
https://www.zhangxinxu.com/wordpress/2010/01/css-float浮動的深入研究、詳解及拓展一/
https://www.zhangxinxu.com/wordpress/2010/01/css-float浮動的深入研究、詳解及拓展二/
https://www.zhangxinxu.com/wordpress/2010/01/對overflow與zoom清除浮動的一些認識/