<!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>
.box1{
width: 200px;
height: 200px;
background-color: aqua;
float: right;
}
.box2{
width: 200px;
height: 200px;
background-color: rgb(102, 0, 255);
clear: both;
}
.box3{
width: 200px;
height: 200px;
background-color: rgb(238, 255, 0);
float: left;
}
.hh{
width: 400px;
height: 200px;
border: 1px solid black;
overflow: hidden;
}
img{
zoom: 0.5;
}
.flex-container{
width: 400px;
height: 350px;
background-color: red;
display: inline-flex;
/* flex-direction: column-reverse;
flex-wrap: wrap-reverse; */
flex-flow: column-reverse wrap-reverse;
}
.flex-item{
width: 200px;
height: 100px;
background-color: aqua;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<div class="box1">这是一个div</div>
<div class="box2">这是一个div</div>
<div class="box3">这是一个div</div>
<div class="hh">
<img src="D:\Users\熊小玲\Desktop\云计算\大一下第一天\小熊.jpg" alt="">
</div>
<div class="flex-container">
<div class="flex-item">flex-item1</div>
<div class="flex-item">flex-item2</div>
<div class="flex-item">flex-item3</div>
<div class="flex-item">flex-item4</div>
<div class="flex-item">flex-item5</div>
<div class="flex-item">flex-item6</div>
</div>
</body>
</html>
浮动布局用float
left-float(默认,不动)left对后面有影响 会遮住
取消:none两边都有浮动
right是不允许的
clear;both不影响