css 浮动float 的一些解决办法

浮动的特性

（1）包裹性
（2）破坏性：使父辈高度塌陷，即父容器没有把浮动的子元素包裹起来。

清除浮动的影响

（1）利用clear属性，消除浮动
clear属性：（left，right，both）规定该元素某一侧的元素相对于该元素不浮动。
[当在父容器的最后子元素加上一个非浮动的div，设置属性为clear：left，由于它有clear属性，所以它会按照左侧div不浮动来定位自己，也就是定位到下一行，而父容器看到有一个非浮动的子元素，会将其包裹]
（2）利用css的：after伪元素（原理与上者相同）

.floatfix:after{
    content:"";
    display:block;
    height:0;
    visibility:hidden;
    clear:left;
}

（3）使父容器形成BFC
BFC的特性：
1.BFC会阻止垂直外边距折叠
2.BFC不会重叠浮动元素
3.BFC可以包含浮动
因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。（http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html）
形成BFC的办法：
float为left/right (用float解决，那父容器的父容器塌陷也是个问题)
overflow为hidden/auto/scroll（用overflow会影响滚动条和绝对定位元素）
display为table-cell/inline-block/table-caption
position为absolute/fixed
（4）hasLayout （IE6,IE7）

.floatfix{
    *zoom:1;
}

浏览器兼容的
.floatfix应用在包含浮动的子元素的父元素上

.floatfix{
    *zoom:1;
}
.floatfix:after{
    content:"";
    display:block;
    height:0;
    visibility:hidden;
    clear:left;
}