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;
}