第一种：
在父容器内再插入一个额外的标签（div或者br），并令其清除浮动（clear）以撑大父容器。这种方法浏览器兼容性好，没有什么问题，缺点就是需要额外的（而且通常是无语义的）标签，所以我个人不大喜欢。
第二种：
用 :after 伪类动态的嵌入一个用于清除浮动的元素，这种方法和上一种原理一样，不同的只是把这个额外的内容用 CSS 生成，但考虑到 IE 不支持 :after 不得不做了不少的 hack。这种方法兼容性一般，但经过各种hack 也可以应付不同浏览器了，不过也比较少用本人。因为解决兼容问题也是个大问题。
第三种：
overflow方法，将父容器的 overflow 设为除 visible 之外的值就可以在标准兼容浏览器中闭合浮动元素，IE自然又是不支持的，所以这种方法和上一种方法一样都对 IE 做了不同处理（具体就是触发layout），不同的就是overflow 没有 :after 伪类那么麻烦了，缺点也有，overflow 可能会产生一些小冲突，比如在一些下拉框，其他决定定位之类的超出父级的同样overflow掉，导致显示不出来。
用空标签清除
.clr {clear: both;}
使用 overflow 属性
#layout {overflow:auto; zoom:1;}
使用 :after （非 IE 浏览器）
#layout:after{
display: block;
clear: both; content: '';
visibility:hidden; height: 0;
}
注：使用:after 需要注意几点，设置高度为零（height: 0;）；content 是必须的，但其值可以为空匹配才会成功！nbsp;30 Pages of a Book Every Day ]o