清除浮动的三种方法
1 加空div层(.clear)
2 overflow属性设置(.clearo)
3 :after伪元素(.clearfix)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.div1{100%;height:auto;border:2px solid red;}
.div2{float:left;20%;height:80px;background:blue;}
.div3{float:right;30%;height:50px;background-color: lightblue;}
.div4{50%;height:20px;background:green;}
.clear{clear:both;}
.clearo{overflow: hidden;zoom:1;}
.clearfix{zoom:1;}
.clearfix:after{
content:"020";/*.点 或 空*/
display: block;
clear:both;
height:0;
visibility: hidden;
}
</style>
</head>
<body>
<div class="div1 clearfix">
<div class="div2">left</div>
<div class="div3">right</div>
<div class="div4 clear"></div>
</div>
</body>
</html>