关于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