因为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>
发表回复