css 清除浮动

功能: 实现图文混排效果

原理: 绝对定位的元素脱离了文档流，而浮动元素依旧在文档流中；

 

清除浮动：(高度塌陷)

1. 额外标签法，<div style="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）

2. 使用after伪元素(该方法中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素)

      #parent{zoom: 1}

#parent:after{

    content:".";

    height:0; //line-height: 0;

    visibility:hidden;

    display:block;

    clear:both;

}

3. overflow + zoom方法(zoom, IE独有属性,类似于缩放)

.fix{overflow:hidden; zoom:1;}

(有问题的，就是这个overflow:hidden;是个小炸蛋，要是里面的元素要是想来个margin负值定位或是负的绝对定位，岂不是直接被裁掉了，所以此方法是有不小的局限性的。)