描述:
盒子的浮动按照顺序贴靠,如果父盒子的空间不够,则会再往前一个兄弟元素进行贴靠
相关截图:
相关代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
.box{
width: 600px;
height:300px;
border: 1px solid #000;
}
.box1{
width: 350px;
height:300px;
background-color: red;
float:left;
}
.box2{
width:250px;
height:150px;
background-color: green;
float:left;
}
.box3{
width:250px;
height:150px;
background-color: blue;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1" >1</div>
<div class="box2" >2</div>
<div class="box3" >3</div>
</div>
</body>
</html>
扩展:
1、如果box2和box1高度相同时,box3会顺着滑下去,形成贴靠box1的现象
2、如果box2的高度大于box1时,会有有趣的现象发生,box3会直接掉下去,说明上述“1”中的贴靠现象实际上是box3掉落形成的。