CSS float 与 清浮动 Better

一、浮动（float）

浮动（float）的定义：

    使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。

    *文档流：文档中可显示对象在排列时所占用的位置。

float 的值：

    left | right | none | inherit

float 的特征：

1. 块在一排显示；
2. 内联支持宽高；
3. 默认内容撑开宽度；
4. 脱离文档流；
5. 提升层级半层；

二、清除浮动的方法

  clear可清除浮动

        clear: left | right | both | none | inherit ; 元素的某个方向上不能有浮动元素

        clear: both; 在左右两侧均不允许有浮动元素。

  1. 加高度

        问题：扩展性不好。如果高度不一定就不适用了。

  2. 父级浮动

        问题：页面中所有父级元素都加要浮动，margin左右 auto 失效（floats bad ！）

  3. inline-block 清浮动方法

        问题：magin左右 auto 失效

  4. 空标签（clear: both) 清浮动

　　问题：IE6 最小高度 19px；（解决后IE6下还有2px偏差）

  5. <br>标签（clear="all") 清浮动

　　问题：所有有浮动元素的旁边都要加

  6. overflow: hidden 清浮动方法

　　问题1：需要配合 宽度 或者 zoom 兼容 IE6 IE7；

　　问题2：浏览器右下角的，返回顶部之类的组件，也可能被hidden；

  7. :after 伪元素清浮动（ 现在的主流方法）

　　为浮动元素的父级加 .clearfix 类。

/* after伪元素：元素内部末尾添加内容 */
/* :after {content: "添加的内容"; } IE6、7下不兼容 */
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}

/* zoom 缩放：
a、触发IE下 haslayout，使元素根据自身内容计算宽高。
b、FF不支持。 */ 
.clearfix { zoom:1; }