標籤：style blog http io ar color os 使用 sp
文刀日月；來源：http://www.cnblogs.com/dtdxrk/p/3555438.html關於css清除元素浮動的方法總結（overflow clear floatfix）在前兩天的一個面試中考官問我web中清除浮動的一些css常用方法，我很輕鬆的答出了：
1.overflow：hidden
2.clear:both
3.floatfix類
然後問題就來了,考官接著問‘為什麼overflow：hidden‘可以清除浮動?這下就把我問住了。寫了這麼多年css只是單純的解決問題，但是從來沒想過為什麼。
看來是需要反省和認真總結一下以前的這些細節問題了，只要不明白的就要加一個‘為什麼?‘
clear:both這三種方法裡最好理解的就是clear:both
<style> #con{border: 2px dashed #ccc;padding:5px;} div.c{width: 100px;height: 100px;background-color: green;margin-right:5px; _display: inline; float: left;color: #fff;} </style> <div id="con"> <div class="c">內容一</div> <div class="c">內容二</div> <div class="c">內容三</div> <div style="clear:both"></div> </div>
原理就是在父元素最後面添加一個非浮動的空div由於有clear：both屬性用來清除浮動，父元素會把它包圍起來，順帶手把float：left的div也一起包裹起來，高度不再塌陷。
這種方法不再流行的主要原因就是改變了結構添加了無用的內容。
overflow:hidden寫這篇文章的起因就是它overflow:hidden，到底為什麼加入這個屬性就可以清除浮動呢？我上網查了一下，文章還是挺多的‘block format content‘下面簡稱BFC，相關文章可以自己搜一下挺多的。
<!DOCTYPE html><html><head> <meta charset="utf-8" /> <title></title> <style> #con{border: 2px dashed #ccc;padding:5px;overflow: hidden;} #con div.c{width: 100px;height: 100px;background-color: green;margin-right:5px; _display: inline; float: left;color: #fff;} </style></head><body> <div id="con"> <div class="c">內容一</div> <div class="c">內容二</div> <div class="c">內容三</div> </div> </body></html>
添加這個屬性就使父級容器形成了BFC，它有三個特性：
1.BFC會阻止垂直外邊距（margin-top、margin-bottom）摺疊
2.BFC不會重疊浮動元素
3.BFC可以包含浮動
父級形成了BFC之後說‘清除浮動‘有點不太恰當，應該改為‘包含浮動‘。形成BFC的一些方法：
當然父級BFC也不是一個很好的解決方案,比如：
1.父級設定float：left會改變寬度，父級也會懸浮
2.父級設定overflow：hidden會影響絕對位置的定位的子項目顯示問題
3.ie6相容性
.floatfix最後說現在大家都在用的floatfix類
.floatfix{*zoom:1;}.floatfix:after{content:"";display:table;clear:both;}
.floatfix:after挺好理解的，就是在元素後面添加一個清除浮動的元素等同於<div style="clear:both"></div>，只不過這是用css來添加的。
但是IE6、7不支援a以外的偽類，所以我們再用*zoom:1用來相容IE6、7。
在IE6、7內有個hasLayout的概念，很多bug都是由hasLayout導致的，當元素的hasLayout屬性值為false的時候，元素的尺寸和位置由最近擁有布局的祖先元素控制。當元素的hasLayout屬性值為true的時候會達到和BFC類似的效果，元素負責本身及其子項目的尺寸設定和定位。我們可以利用這點兒在IE6、7下完成清浮動，先看看怎麼使元素hasLayout為true
在IE7中使用overflow: hidden|scroll|auto 也可以使hasLayout為true
最後總結現在我們已經知道父級div什麼情況可以形成BFC，ie6、7的hasLayout屬性值什麼時候可以形成true，那麼在項目的不同應用中就可以使用不同的方法來清除浮動了。
關於css清除元素浮動的方法總結（overflow clear floatfix）
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
