本节内容：
CSS清除浮动
本文介绍四种清除浮动的方法，供大家学习参考。
1、结尾处加空div标签 clear:both
复制代码 代码示例:
.div1{background:#000080;border:1px solid red；}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{clear:both}
这种方法，无缘无故多出一个空的div，而且浮动越多就要不断加div。
2、父级div 也一起浮动
复制代码 代码示例:
.div1{background:#000080;border:1px solid red;width:98%;margin-bottom:10px;float:left；}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
缺点：因为父级的元素一浮动，又会产生其他元素的浮动问题。
3、父级div定义 height
主要用在那些可以确定高度的元素上，感觉使用上很方便。
但是那些需要自适应高度的就不适合了。
复制代码 代码示例:
.div1{background:#000080;border:1px solid red；height:200px;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
4、父级div定义 伪类:after 和 zoom
可以定义一个通用类选择器，然后反复使用：
复制代码 代码示例:
.clear{zoom:1}
.clear:after{display:block;clear:both;content:""；}
解释：
content配合before和：after伪类一起使用，用于插入内容。
例子：
复制代码 代码示例:
a:after{content:"aaa";}
<p><a href="#" target="_blank" target="_blank" target="_blank" target="_blank">AAA</a></p>
显示结果：
AAAaaa
css样式：
复制代码 代码示例:
.div1{background:#000080;border:1px solid red;}
.left{float:left;width:20%;height:200px;background:#DDD}
.right{float:right;width:30%;height:80px;background:#DDD}
.clear{zoom:1}
.clear:after{display:block;clear:both;content:""；}
