webveuje/csspress/demo/float.html
2021-01-20 11:25:18 +08:00

71 lines
1.8 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin:0;
padding: 0;
}
.box{
width: 1000px;
height: 300px;
background: gold;
margin: 20px;
}
.box1{
/* width:60px;
height: 60px; */
background: red;
/* background: rgba(255, 0, 0, 0.363); */
/* float: left; */
}
.box2{
width: 120px;
height:80px;
background: gray;
border: 1px solid pink;
/* float:right */
float: left;
}
.a{
/* width: 70px;
height: 70px;
border: 1px solid blue;
background: pink; */
clear: right;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">asaaaa</div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<div class="box2"></div>
<!-- <div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box1"></div>
<div class="box2">1</div>
<div class="box2">2</div>
<div class="box2">3</div>
<div class="box2">4</div>
<div class="box2">5</div>
<div class="box2" style="height: 180px;">6</div>
<div class="a"></div>
<div>nhjksahkihfi</div> -->
</div>
</body>
</html>