<html>
<head>
<meta charset="utf-8">
<title>浮动对元素产生的影响</title>
<style>
.dv1,.dv2,.dv3{
width:200px;
height:200px;
}
.dv1{
background:red;
/左浮动/
float:left;
}
.dv2{
background:blue;
float:left;
}
.dv3{
background:yellow;
float:left;
}
p{
height:100px;
background:black;
}
/清除浮动方法一/
/.clear{
clear:both;清除浮动两端所带来的影响
}/
/清除浮动方法二/
/* overflow:visible / hidden; scroll/ auto /
/ .box{ /
/ overflow:hidden; //给父元素添加/
/ overflow:auto;
} */
/*清除浮动的方法三*/
/* .box{
height:200px;
} */
/*清除浮动方法四 伪类*/
.box:after{
content:'';/*在box后面添加内容为空*/
display:block;/*把添加的内容转换成块元素*/
clear:both; /*清除元素两端的浮动*/
}
</style>
</head>
<body>
<div class='box'>
<div class='dv1'></div>
<div class='dv2'></div>
<div class='dv3'></div>
<!-- <div class='clear'></div> -->
</div>
<p></p>
</body>
</html>
