因为 box1 加了 float，导致 box2 的内容跑下来了。
所以须要革除浮动
解决方案 1：给 box1 加 overflow:hidden，造成 bfc
解决方案 2：应用:after 即隔墙法 {content:’’; clear:both, display:block}
解决后的成果：
对应的代码
<body>
<div class="box1">
<div class="aaa">box1 的 </div>
<div class="aaa">box1 的 </div>
<div class="aaa">box1 的 </div>
</div>
<div class="box2">
<div class="bbb">box2 的 </div>
<div class="bbb">box2 的 </div>
<div class="bbb">box2 的 </div>
</div></body>
<style>
.box1{
background-color:red;
overflow: hidden;
}
.box2{background-color:green;}
.aaa{
background-color:yellow;
float: left;
}
.bbb{
background-color:orange;
float: left
}
/* .box1:after {
content: '';
clear: both;
display: block;
} */
</style>