1.什麼是浮動：在我們佈局的時用到的一種技術，能夠方便我們進行佈局，通過讓元素浮動，我們可以使元素在水平上左右移動，再通過margin屬性調整位置
2.浮動的原理：使當前元素脫離普通流，相當於浮動起來一樣，浮動的框可以左右移動，直至它的外邊緣遇到包含框或者另一個浮動框的邊緣
3.浮動的生成：使用css屬性float：left/right/none 左浮動/右浮動/不浮動（默認）
4.浮動的影響：
- 對附近的元素佈局造成改變，使得佈局混亂
- 浮動後的元素可以設置寬度和高度等，也就是說元素浮動後會變成塊級元素，但我更傾向於說元素變成inline-block類型的元素，即同時擁有塊級與行內元素的特徵
- 因爲浮動元素脫離了普通流，會出現一種高度坍塌的現象：原來的父容器高度是當前元素A撐開的，但是當A元素浮動後，脫離普通流浮動起來，那父容器的高度就坍塌（前提是父容器高度小於A元素高度），下面用圖來說明一下高度坍塌：
![在這裏插入圖片描述]()
5.清除浮動與閉合浮動
先說說我個人的理解：我將解釋一下我理解的閉合浮動與清除浮動
清除浮動：使用clear元素清除外面浮動，解決外面浮動對自己的影響
閉合浮動：當前塊級中，其子元素使用了浮動，會給當前塊內部和塊外部的佈局帶來影響，所以將當前塊中的浮動閉合，能將影響最大化清除。舉個例子:
代碼：
<style type="text/css">
.box1{
width: 200px;
border: 2px solid #0f0;
/*overflow: hidden;*/
}
.box1 .child-1{
float: left;
height: 100px;
width: 100px;
background: #fd0;
}
.box1 .child-2{
float: left;
height: 100px;
width: 100px;
background: #fba;
}
.box2{
width: 200px;
height: 150px;
border: 2px solid #00f;
/* clear: both; */
}
</style>
<body>
<div class="box1">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
</div>
<div class="box2"></div>
</body>
圖一：原始圖
圖二：child-1 和 child-2 進行浮動
圖三:區分清除浮動與閉合浮動（個人理解：在外面解決問題，內部問題未解決）
清除浮動：對box2使用：clear：both
圖四：閉合浮動（在內部解決問題：同時解決外部問題）
閉合浮動：對box1使用overflow：hidden（其中一種方式，後面還有更好的方式）
因此我更願意稱其爲閉合浮動:其實也可以叫清除浮動，不過我就是覺得閉合浮動比較形象。
6.閉合浮動方法(常見的幾個方法)：既然浮動帶來這些不利的影響，我們就要想辦法清除它。
其一：通過在浮動元素的末尾添加一個空元素，設置 clear：both屬性；
缺點：成本太高，額外添加了一個元素，維護困難
<div class="box1">
<div class="child-1">child-1</div>
<div class="child-2">child-2</div>
<div style="clear: both;"></div>
</div>
<div class="box2"></div>
其二：通過設置父元素 overflow 或者display：table 屬性來閉合浮動，給box1添加overflow：hidden
其三（推薦）：使用僞元素：after,下面是代碼，給box1添加上clearfloat這class即可
/*適配ie6*/
.clearfloat{
zoom:1;
}
.clearfloat:after{
display:block;
height:0;
content:"";
clear:both;
visibility:hidden;
}