float大概是css3以前網頁佈局里最常用的一個屬性了，經常看到一言不合就浮動的代碼，就一起來深入挖掘一下這個一半天使一半魔鬼的屬性吧。 本文是讀張鑫旭大神慕課網float視頻後的一些總結及一些拓展用法，視頻地址：http://www.imooc.com/learn/121。該視頻初讀很枯燥，認真 ...
float大概是css3以前網頁佈局里最常用的一個屬性了，經常看到一言不合就浮動的代碼，就一起來深入挖掘一下這個一半天使一半魔鬼的屬性吧。
本文是讀張鑫旭大神慕課網float視頻後的一些總結及一些拓展用法，視頻地址：http://www.imooc.com/learn/121。該視頻初讀很枯燥，認真讀後會發現更枯燥。。。。。。不過遇到坑之後再去讀就會發現良心視頻，字字珠璣。閑話不多說，現在開始：
1.float的起源
浮動最初的設計是用來做文字的環繞效果的，這也是設計者想讓我們做的東西。
2.float的參數
float屬性的參數取值有三個：
left：表示元素浮動在左邊。
right：表示元素浮動在右邊。
none：對象不浮動，遵循標準文檔流。
3.效果展示（以float：left為例，float：right的情況只是位置的不同）
<style> div{ height: 20px; } .d1{ width: 50px; background: hsl(100,50%,80%); } .d2{float: left; width: 100px; background: hsl(150,50%,80%); } .d3{ width: 250px; height: 100px; background: hsl(10,50%,80%); } .d4{float: left; width: 300px; background: hsl(250,50%,80%); } span{ margin-right: 3px; border-right: solid 1px #ccc; background-color: hsl(60,50%,80%); } .s3{ float:left; } </style> <body> <div class="d1">div1</div> <div class="d2">div2有float</div> <div class="d3">div3</div> <span class="s1">span1</span> <span class="s2">span2</span> <span class="s3">span3有float</span> <div class="d4">div4有float</div> <span class="s4">span4 </span> </body>
當瀏覽器寬度不夠長時：
當瀏覽器寬度足夠長時：
我們可以得出以下幾個結論：
當浮動元素為塊狀元素時，他的下一個緊鄰元素（不浮動）是塊狀元素時會與該浮動元素髮生重疊，該浮動元素會在上方。如果下一個緊鄰元素為內聯元素時會緊跟該浮動元素。
當浮動元素為內聯元素時，他的下一個緊鄰元素（不浮動）是塊狀元素時不會移動，但寬度不夠也會發生重疊。如果下一個緊鄰元素為內聯元素時會緊跟該浮動元素。
4.浮動的破壞性
設置了float的元素會脫離文檔流，會導致其父元素出現高度“坍塌”。
<div style="border:3px dashed #ddd"> <p>我還沒設置float屬性</p> </div>
<div style="border:3px dashed #ddd"> <p style="float:left">我設置了float屬性</p> </div>
5.浮動的包裹性
這是沒有float的div
這是個帶有float的div
6.浮動去空格
這個已經在上面代碼和結論中中有所展示，簡單來說就是正常文檔流中兩個內聯元素之間以及上下會預設有一段縫隙，而浮動可以清除這個縫隙，讓兩個元素無縫結合，也會清除上下之間的縫隙。
7.清除浮動的影響
7.1 使用clear屬性
a.將<div style="clear:both;"></div>放到當作最後一個子標簽放到父標簽那兒，也是最簡單的清除浮動的方法，但是不推薦。
<div style="border:3px dashed #ddd"> <p style="float:left">我設置了float屬性</p> <div style="clear:both"></div> </div>
b.after偽元素和zoom
after，就是指標簽的最後一個子元素的後面。因此我們可以用CSS代碼生成一個具有clear屬性的元素
<style> .mydiv{ border:3px dashed #ddd } .mydiv:after{ content: ""; clear:both; display: block; } </style> <body> <div class="mydiv"> <p style="float:left">我設置了float屬性</p> </div> </body>
但是ie6/7無法識別偽元素after，就得用zoom方式，例：
.mydiv{
border:3px dashed #ddd;
zoom:1
}
7.2 BFC
給父元素添加浮動，或者overflow:hidden,position:absolute等可以使元素BFC化的屬性，下節單獨探討BFC的生成條件和佈局規則，例：
<style> .mydiv{ border:3px dashed #ddd; overflow: hidden; } </style> <body> <div class="mydiv"> <p style="float:left">我設置了float屬性</p> </div> </body>
關於float的佈局以及清除影響就先到這了，有遺漏和錯誤的地方歡迎指正，下節來一起看看BFC到底是什麼，他是如何佈局的，為什麼可以用來清除浮動。
