因为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>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。