標籤：style blog http color io os 使用 ar strong
在CSS布局中float屬性經常會被用到，但使用float屬性後會使其在普通流中脫離父容器，讓人很苦惱
1 浮動帶來布局的便利，卻也帶來了新問題 1 <!doctype html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Clear float</title> 6 <style type="text/css"> 7 .container{ 8 margin: 30px auto; 9 width:600px;10 height: 300px;11 }12 .p{13 border:solid 3px #a33;14 }15 .c{16 width: 100px;17 height: 100px;18 background-color: #060;19 margin: 10px;20 float: left;21 }22 </style>23 </head>24 <body>25 <div class="container">26 <div class="p">27 <div class="c"></div>28 <div class="c"></div>29 <div class="c"></div>30 </div>31 </div>32 </body>33 </html>
我們希望看到的效果是這樣的
但結果卻是這樣的
父容器並沒有把浮動的子項目包圍起來，俗稱塌陷，為了消除這種現象，我們需要一些清除浮動的技巧。
2 如何清理浮動清理浮動一般有兩種思路
分別看一下
2.1 利用 clear屬性，清除浮動clear屬性是個什麼東東呢？clear 屬性規定元素的哪一側不允許其它之前浮動元素，修改一下剛才代碼
<div class="p"> <div class="c"></div> <div class="c" style="clear:left;"></div> <div class="c"></div></div>
第二個div添加了clear:both屬性後，其左側的div（第一個div）不再浮動，所以後面的div都還行(huan hang)了。我們可以利用這點兒在父容器的最後添加一個空的div，設定屬性clear:left，這樣就可以達到我們目的了。
2.1.1 添加空div清理浮動對我們剛才代碼稍作修改
<div class="p"> <div class="c"></div> <div class="c"></div> <div class="c"></div> <div style="clear:left;"></div></div>
也就是在父容器最後添加
<div style="clear:left;"></div>
看看效果
果真好使了，有些同學看了後可能感覺奇怪，為什麼想上一個例子修改第二個div
<div class="c" style="clear:left;"></div>
沒有變成這樣的效果
說一下自己的拙見，clear:left屬性只是消除其左側div浮動對它自己造成的影響，而不會改變左側div甚至於父容器的表現，在父容器看來，三個div還都是float的，所以高度依舊塌陷。但是我們在最後添加了一個非浮動的div，由於它有clear:left屬性，所以它會按照左側div不浮動來定位自己，也就是定位到下一行，而父容器看到有一個非浮動、普通流的子項目元素，會將其包圍，這樣造成了順便也把三個浮動元素也包裹起來的效果，高度不再塌陷（不知道說明白沒有或者這種理解對不對，還望明白的同學指點）。
當然除了添加div，還可以添加br等其它html元素，原理相同，不再贅述。
2.1.2 使用CSS插入元素上面的做法瀏覽器安全色性不錯，但是有個很大的問題就是向頁面添加了內容來達到改變效果的目的，也就是資料和表現混淆，既然是變現，看看怎麼使用CSS來解決這一問題。根本的做法還是向父容器最後追加元素，但我們可以利用CSS的:after虛擬元素來做此事。
添加一個類 floatfix
.floatfix:after{ content:"."; display:block; height:0; visibility:hidden; clear:left;}
對父容器添加此類
<div class="p floatfix"> <div class="c">1</div> <div class="c">2</div> <div class="c">3</div></div>
這樣我們就可以看到正確效果了
簡單解釋一下，對父容器添加floatfix類後，會為其追加一個不可見的塊元素，然後設定其clear屬性為left，和剛才原理類似。
2.1.3 大師手筆Nicolas Gallagher 在A new micro clearfix hack中提供了一種看起來更清爽的做法
.floatfix:after{ content:""; display:table; clear:both;}
Nicolas Gallagher原文中還有:before是為了處理margin邊距重疊，本文中沒有列出來。
有同學會提出來了上面方法看起來不錯，但是IE6、7不支援虛擬元素怎們辦？這就需要我們使用BFC/haslayout的姿勢了
2.2 使父容器形成BFC經過了前些日子園裡關於BFC的狂轟濫炸相信大家都對BFC有了一定的瞭解，不過癮的同學可以看看 Block Format Content，BFC有三個特性
按照BFC的定義，只有同屬於一個BFC時，兩個元素才有可能發生垂直Margin的重疊，這個包括相鄰元素，嵌套元素，只要他們之間沒有阻擋(例如邊框，非空內容，padding等)就會發生margin重疊。
因此要解決margin重疊問題，只要讓它們不在同一個BFC就行了，但是對於兩個相鄰元素來說，意義不大，沒有必要給它們加個外殼，但是對於嵌套元素來說就很有必要了，只要把父元素設為BFC就可以了。這樣子項目的margin就不會和父元素的margin發生重疊了。
我們可以利用BFC的第三條特性來“清浮動”，這裡其實說清浮動已經不再合適，應該說包含浮動。也就是說只要父容器形成BFC就可以，簡單看看如何形成BFC
我們可以對父容器添加這些屬性來形成BFC達到“清浮動”效果
2.2.1 利用float來使父容器形成BFC簡單修改一下代碼
<div class="p" style="float:left;"> <div class="c">1</div> <div class="c">2</div> <div class="c">3</div></div>
這樣我們可以得到結果
我們可以看到父容器高度沒有塌陷，但是長度變短了，因為div應用float‘後會根據內容來改變長度，這個在很多時候很有用，但是我們不希望有這種效果怎麼辦？
2.2.2 使用BFC的其它局限上面提到使用BFC使用float的時候會使父容器長度縮短，而且還有個重要缺陷——父容器float解決了其塌陷問題，那麼父容器的父容器怎麼辦？難道要全部使用folat嗎（確實有這種布局方式倒是）。BFC的幾種方式都有各自的問題，overflow屬性會影響捲軸和絕對位置的元素；position會改變元素的定位方式，這是我們不希望的，display這幾種方式依然沒有解決低版本IE問題。。。
看起來還是第一種方式比較好，可是低版本IE該怎麼辦呢？
2.2.3 hasLayout我們知道在IE6、7內有個hasLayout的概念，很多bug正式由hasLayout導致的，當元素的hasLayout屬性值為false的時候，元素的尺寸和位置由最近擁有布局的祖先元素控制。當元素的hasLayout屬性值為true的時候會達到和BFC類似的效果，元素負責本身及其子項目的尺寸設定和定位。我們可以利用這點兒在IE6、7下完成清浮動，先看看怎麼使元素hasLayout為true
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true
3 一個相對靠譜的解決方案經過上面的比較我們可以得出一個相對靠譜的解決方案
具體應該使用哪種方式來使元素hasLayout為true呢？相對而言zoom：1比較好，因為不會造成其它影響。想造成只在IE6、7上使用某些CSS的效果，我們還得需要一些CSS hack的知識，感興趣同學可以看看 CSS hack，我們可以寫出這樣的CSS
.floatfix{ *zoom:1;}.floatfix:after{ content:""; display:table; clear:both;}4 最後
雖然我們得出了一種瀏覽器安全色的靠譜解決方案，但這並不代表我們一定得用這種方式，很多時候我們的父容器本身需要position：absolute等形成了BFC的時候我們可以直接利用這些屬性了，大家要掌握原理，活學活用。總而言之清理浮動兩種方式
css清浮動處理
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
