极客观点
项目管理
HarmonyOS
css 代码如下：
<html>
<style type="text/css">body{
margin:0px;
}
div.box{
width:640px;
height:800px;
}
div.box1{
width:500px;
height:100px;
background-color: red;
float:left;
}
div.box2{
width:140px;
height:140px;
background-color: blue;
float:left;
}
div.box3{
width:250px;
height:280px;
background-color: green;
float:left;
}
div.box4{
width:250px;
height:200px;
float:left;
background-color: purple;
}
div.box5{
width:140px;
height:220px;
background-color: yellow;
float:left;
}
div.box6{
width:100px;
height:120px;
float:left;
background-color: red;
}
</style>
<body>
<div class="box"><body>
<div class="box">
<div class="box">
<div class="box3">box3
</div>
<div class="box4">box4
</div>
<div class="box5">box5
</div>
<div class="box6">box6
</div>
</div>
</body></html>
效果如下：
1.为何box6没有堆在 box3 上面？
2。为何box6 和box4有一个空隙?
当你给所有的div设置浮动后，它们其实相当于在同一个流中。
规律是，当在同一行里放不下时，下一个元素会紧贴上一行最后一个元素，并尽可能的往最左移动。也就是，最先是向上浮动，然后再向左浮动。
所以你可以看到box6其实是紧贴box5的底部的。
修改一下Box5的高度，box6跟着往下走了
修改box4的高度，由于box6不能在原来的位置紧贴box5的底部，所以往右移动了。