CSS清除浮动的常用方法优缺点分析

1. .outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}    .div1{width: 80px;height: 80px;background: red;float: left;}   
2. .div2{width: 80px;height: 80px;background: blue;float: left;}    .div3{width: 80px;height: 80px;background: sienna;float: left;}   
3.   

这里没有给最外层的DIV.outer 设置高度，但是我们知道如果它里面的元素不浮动的话，那么这个外层的高是会自动被撑开的。但是当内层元素浮动后，就出现了一下影响：

    （1）：背景不能显示 （2）：边框不能撑开 （3）：margin 设置值不能正确显示
当一个内层元素是浮动的时候，如果没有关闭浮动时，其父元素也就不会再包含这个浮动的内层元素，因为此时浮动元素已经脱离了文档流。也就是为什么外层不能被撑开了！

解决办法如下（使用其他代码示例）：

1、父级div定义伪类:after和zoom