關於css中float的一切

  原文：http://css-tricks.com/all-about-floats/  這篇文章說的簡單易懂

 

  float是CSS中關於定位的屬性。

  float有4個值：none, left, right, inherit (繼承父元素的float屬性值）

  float的姐妹屬性：clear

  clear有4個值：both， none， left, right (也可以說有5個：inherit，但在IE中不支持）

 

  如：

  設置清除浮動：

#footer {
   clear: both;            
}

 

 

  float引起的父元素的折疊問題：

     此問題在firefox出現。

 

 

   我們可以通過清除浮動來解決這個問題。

 

   如何清除浮動？

 

  1）使用空div

<div style="clear: both;"></div>

 

  2）在父元素上設置overflow屬性
     對父元素設置overflow：auto；或overflow：hidden；

     注意：overflow屬性並不是專門用來清除float的，故小心隱藏了內容或觸發了不必要的滾動條。

 

  3）使用偽元素選擇器：after（簡單的清除方法）

.clearfix:after { 
   content: "."; 
   visibility: hidden; 
   display: block; 
   height: 0; 
   clear: both;
}

 

  使用float常出現的問題：
      1）疊加 

       當圖像超過層的大小之后，IE會擴展float以容納圖像，會影響了布局。

      

       一個常見的問題如下：

       

        快速解決方法：保證你的任何圖片不會出現這種問題。使用overflow: hidden來裁剪超出的部分。

  

   2)Double Margin Bug

            若在IE6下在和float相同方向上使用了margin后，會使margin加倍。

         快速解決方法：在float上面設置 display：inline；

       

       3）The 3px Jog（3px的偏離）

            若一段文字上面緊接着一個浮動的元素，會被踢離3px。

          快速解決方法：給受影響的文本加上高或寬

 

        4）The Bottom Margin Bug （影響IE7)

           若一個浮動的父元素有一個浮動的子元素，則其子元素的margin屬性的bottom值會被父元素忽略。

           快速解決方法：在父元素上使用 bottom padding 

 

  更加深入地處理float問題：http://www.qianduan.net/new-clearfix.html

  關於IE的hasLayout：http://baike.baidu.com/view/2945869.htm