清除浮动的几种方式和优缺点

1. 在父元素结尾处添加空的div标签，clear:both。
   优点：简单，代码少，浏览器支持好，不容易出问题；
   缺点：不少初学者不知道其原理，如果页面浮动布局多，就要增加很多空div，让人感觉很不爽;这种方法不推荐使用，这是以前的一种使用方式。
   

2. 给父元素添加before，after为元素。
   优点：浏览器支持好，在ie8以上的ie浏览器以及其他非ie浏览器都支持
   缺点：代码多

   #content:after{
          content:"";display:block;clear:both;}
   选择器:after{
          content:"";display:block;clear:both;}
   

3. 给父元素添加overflow:hidden属性。
   必须定义width或者zoom:1，同时不能定义height，使用overflow:hidden时，浏览器会自动检查浮动区域的高度。
   优点：代码少，简单，浏览器支持。
   缺点：不能配合position使用，因为超出部分被隐藏

4. 父元素一起浮动，所有代码浮动变成一个整体，但是会产生新的问题，只做了解不推荐使用。

5. 父级div定义display:table ，只做了解不推荐使用。
   

6. 结尾处加br标签clear:both ，只做了解不推荐使用。