一、
cleat:both;
二、父容器使用overflow: auto;
使用这种方法,必须定义width或者zoom,而且不能设置高度height,优点是代码少,缺点是不能使用position,否则超出的元素将会被隐藏
zoom是IE专有属性
zoom是设置或检索对象的缩放比例。设置或更改一个已被呈递的对象的此属性值将导致环绕对象的内容重新流动。
虽然此属性不可继承,但是它会影响对象的所有子对象( children )。这种影响很像 background 和 filter 属性导致的变化。
此属性对于 currentStyle 对象而言是只读的,对于其他对象而言是可读写的。
当设置了zoom的值之后,所设置的元素就会就会扩大或者缩小,高度宽度就会重新计算了,这里一旦改变zoom值时其实也会发生重新渲染,运用这个原理,也就解决了ie下子元素浮动时候父元素不随着自动扩大的问题。
三、父容器使用伪类:after跟zoom
这种方式是最推荐的,目前大多数大型网站都是使用这种方式清除浮动,浏览器兼容好,不会出现什么奇怪的问题。
zoom是IE专有属性,可解决ie6,ie7浮动问题,IE8以上和非IE浏览器才支持伪类:after。
缺点就是代码比较多,需要伪类:after跟zoom一起使用才能兼容所有主流浏览器。
但推荐使用,可将改样式定义为公共样式,减少代码量