<html>
<head>
<meta charset="utf-8">
<title>浮動(dòng)對(duì)元素產(chǎn)生的影響</title>
<style>
.dv1,.dv2,.dv3{
width:200px;
height:200px;
}
.dv1{
background:red;
/左浮動(dòng)/
float:left;
}
.dv2{
background:blue;
float:left;
}
.dv3{
background:yellow;
float:left;
}
p{
height:100px;
background:black;
}
/清除浮動(dòng)方法一/
/.clear{
clear:both;清除浮動(dòng)兩端所帶來(lái)的影響
}/
/清除浮動(dòng)方法二/
/* overflow:visible / hidden; scroll/ auto /
/ .box{ /
/ overflow:hidden; //給父元素添加/
/ overflow:auto;
} */
/*清除浮動(dòng)的方法三*/
/* .box{
height:200px;
} */
/*清除浮動(dòng)方法四 偽類*/
.box:after{
content:'';/*在box后面添加內(nèi)容為空*/
display:block;/*把添加的內(nèi)容轉(zhuǎn)換成塊元素*/
clear:both; /*清除元素兩端的浮動(dòng)*/
}
</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>
