CSS浮动的清除

• clear清除浮动（添加空div法）：在浮动元素下方添加空div,并给该元素写css样式： {clear:both;height:0;overflow:hidden;}，但缺点就是如果页面浮动浮动布局多的话，就要添加很多空div去清除浮动，不便优化，不建议使用
• 给浮动元素父级设置高度：我们知道了高度塌陷是应为给浮动元素的父级高度是自适应导致的，那么我们给它的设置适当的高度就可以解决这个问题了。 缺点：在浮动元素高度不确定的时候不适用。
• 以浮制浮（父级同时浮动）：何谓“以浮制浮”呢？就是让浮动元素的父级也浮动。 缺点：需要给每个浮动元素父级添加浮动，浮动多了容易出现问题，而且会影响到后面元素的定位，有时候，父容器是定位死的，无法变成浮动。。
• 父级设置成inline-block：缺点：父级的margin左右auto失效，无法使用margin: 0 auto;居中了。
• br 清浮动：
  br 标签自带clear属性，将它设置成both其实和添加空div原理是一样的。 问题：不符合工作中：结构、样式、行为，三者分离的要求。
• 给父级添加overflow:hidden 清浮动方法：问题：需要配合 宽度 或者 zoom 兼容IE6 IE7； overflow: hidden; *zoom: 1;，优点是代码少，缺点是不能使用position,否则超出的元素将会被隐藏。

• after伪类 清浮动：通过CSS语句添加子元素， “content:”020“;”是在父容器的结尾处放一个空白字符,也可以什么也不写，“height: 0;”是让这个这个空白字符不显示出来，“display: block; clear: both;”是确保这个空白字符是非浮动的独立区块。
  为了兼容 IE6、7需要配合zoom使用最后产生的代码为：

  .clear:after{content:' \0020';display:block;clear:both;height:0;} .clear{zoom:1;}
  

  实例效果：float1.html