總結css重要知識點時，再看了一遍張鑫旭大神的float博文（以及下一篇），加上自己的了解下下了對float的總結。
1.float最初是用來做什麼的？
float最初被發明其實隻是用于讓文字環繞圖檔，但是因為其浮動性質，越來越多的人将其應用到了布局當中，是以引出了很多事情。。。
2.float有哪些特性？
包裹性
float 讓文字浮動到圖檔周圍，這就是包裹性
撇開浮動的“破壞性”，浮動就是個帶有方位的display:inline-block屬性。
其實 display:inline-block 也具有包裹性
<style>
div{
background-color: red;
}
</style>
</head>
<body>
<div>11111111111</div>
</body>
div是塊元素，是以會占一行
div{
background-color: red;
display : inline-block;
}
将div變為行内塊元素，不占一行了，相當于div就包裹住了裡面的内容，這就是包裹性
當然float也有這種包裹性
div{
background-color: red;
float : left;
}
不過float是有方向的包裹，它可以向右包裹，display : inline-block 隻能向左包裹
破壞性
float的破壞性非常大，它會破壞（更準确來說應該是脫離）正常的文檔流。
有個哥們兒說的很形象，浏覽器的視窗其實是個立體的，有好幾層，添加了float屬性的元素就會脫離原來那一層，跑到上一層上面，它會蓋住原來那層的一些東西。（不知道這樣了解對不對，但我認為這樣會很好了解）
舉例：
<style>
#temp1{
background-color: red;
width: 100px;
height: 100px;
}
#temp2{
background-color: blue;
width: 300px;
height: 300px;
}
#temp3{
background-color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="temp1"></div>
<div id="temp2"></div>
<div id="temp3"></div>
</body>
三個div都沒有添加float屬性，則會這樣從上到下正常顯示
給第一個div添加float屬性
第一個div脫離原來的那一層，到上一層去了，其他兩個div會往上移，占領第一個div的原有的位置。
給第一個，第二個div都設定float
第一個第二個都 “上去了” ，因為都在上面那層是以第二個div會浮動到第一個div右邊，會包裹着第一個div，這就是包裹性。第三個占領它兩個的原有位置。
給三個div都設定float屬性
可想而知是并排的。。。
延申：
display : inline-block 也是有包裹性，如果我們将三個div的float屬性都替換成 display : inline-block 會怎麼樣呢？
（如果你的三個div有間隔，那是因為你的三個div之間有空格導緻的，改成下面這樣就能解決了
)
為什麼三個div會底部對齊呢？因為三個現在都是行内塊元素，它們所在的這一行被高度最高的一個行内塊元素撐着的，是以就像是三個不同高度的方塊放在一個容器裡，當然會底部對其啦
3.float産生的後果是什麼？
float産生的最常見的後果是父元素的高度塌陷
<style>
#container{
border: 2px solid black;
}
#container>div{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div></div>
</div>
給紅色div添加浮動後
可看出來紅色div的父元素container高度為零了，這就是高度塌陷，因為紅色div相當于已經從父元素“出來了”，父元素中沒有内容能撐開它了，是以就會高度塌陷。
解決高度塌陷的辦法就是給父元素設定個高度。
4.清除浮動
這是未清除浮動的時候
<style>
#temp1{
background-color: red;
width: 100px;
height: 100px;
float: left;
}
#temp2{
background-color: blue;
width: 300px;
height: 300px;
float: left;
}
#temp3{
background-color: green;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
<div id="temp1"></div>
<div id="temp2"></div>
</div>
<div id="temp3"></div>
</body>
我們想清除浮動那該怎麼辦呢，想讓第三個div不被第一個第二個div的浮動影響，讓它呆在它原來的位置，該怎麼辦呢？
最推薦
（1）設定僞元素::after來解決
#container::after{
display: block;
clear: both;
content: "";
visibility: hidden;
height: 0;
}
給前兩個div的父元素設定僞元素，那麼會在父元素後面插入一個僞元素，讓它清除浮動clear:both就不會影響後面的元素了。
要注意的是僞元素一定要設定content屬性，為空也行，僞元素的display預設為inline，這裡要設定為display:block，clear:both是清除浮動， visibility: hidden;height: 0;都是為了這個僞元素不會在頁面中顯示出來。
（2）overflow:hidden;
#container{
overflow : hidden;
}
但是這個方法在碰到margin負邊距排版時會産生意想不到的結果，是以最好别這樣用。
（3）直接在container後放一個<div style=“clear:both;”></div>
這個會浪費一個标簽，并且隻能使用一次，還可能會影響後續布局，是以别用。