<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> 清除浮动 </title>
<style type="text/css">
.div1{
width:60px;
height:100px;
border:1px solid black;
background-color:pink;
float:right;
}
.div2{
width:500px;
height:400px;
border:1px solid red;
}
.div3{
background-color:green;
width:60px;
height:100px;
}
/*清除浮动*/
.clear{
clear:both;
}
</style>
</head>
<body>
<div class="div2">
<div class="div1">div1</div>
<div class="div1">div2</div>
<div class="div1">div3</div>
<div class="clear"><div><!--清除浮动-->
<div class="div3">div3</div>
</div>
</body>
</html>
清楚浮动.png
小结:
清除浮动后不受浮动约束,用来和浮动组合,搭建界面!
网友评论