CSS-BFC

最近看幕課網CSS之Float，float最初是爲了實現文字的環繞效果；這裏面提到BFC，恰好項目中正用到一種解決BFC的方法，DIV在添加float後，就不存在文檔流中啦，不佔據空間，這使的一些未浮動的DIV會出現一些奇怪的佈局，像塌陷，這裏

造成BFC的條件(符合如下任一條件便可)： 

1) float的值不爲none；

2)overflow的值不爲visible；

3)display的值爲 table-cell、table-caption和inline-block之一；

4)position的值不爲 static或relative中的任何一個；

我覺的正是DIV浮動起來了，才比之前的table佈局更加靈活，最簡單清除浮動的方式是添加一個新的DIV，附上clear:both，這樣會產生一些對於之後不易維護的代碼，繼而出現利用after,before僞類+content/zoom來清楚浮動，目前項目解決方法就是這個，具體代碼：

xxx.after{
   display:block;
   clear:both;
   height:0;
   font-size:0;
   content:"";
   zoom:1
}

大師手法：

xxx:after{
    content:"";
    display:table;
    clear:both;
}

View Code

這邊跟BFC還有個相似的叫hasLayout，抽空看看博文再作記錄。

*******補充IE hasLayout*******只存在與IE7,IE6

hasLayout是IE渲染引擎的內部組成部分，一個元素計算自身內容大小，不是根據自身對本身組織和計算大小，就是依賴父元素來計算和組織;

大多IE下的顯示錯誤，就是源於 haslayout。若是它設置成了true，它就不得不去渲染它本身，所以元素不得不擴展去包含它的流出的內容。例如浮動或者很長很長的沒有截斷的單詞，若是haslayout沒有被設置成true，那麼元素得依靠某個祖先元素來渲染它。這就是不少的ie bugs誕生的地方

它是布爾值，爲true是既其擁有佈局，經過ie developer toolbar 擁有 haslayout的元素，一般顯示爲「haslayout = -1」;

使其擁有佈局方式:經常使用zoom:1

    IE6:height:1% 切記不能設置overflow:visible；或用條件註釋:<!--[if IE 6]><![endif]-->(gt:大於不包含,gte:大於包含,lt:小於不包含,lte:小於包含)

    IE7:設置其min-height:0

haslayout 問題引發的常見 bug

1、

IE6 及更低版本的雙空白邊浮動 bug

bug 修復: display:inline;

2、

IE5-6/win 的 3 像素偏移 bug

bug 修復: _height:1%;

3、

IE6 的躲躲貓(peek-a-boo) bug

bug 修復: _height:1%;

4、

IE6/7負margin隱藏Bug：

bug 修復:去掉父元素的hasLayout；

或者賦hasLayout給子元素,並添加position:relative;