1.使用伪元素清除浮动

.box::after{ content: " "; clear: both; display: block;}
.left,.right{ width:100px; height: 100px; background:#388bff; float: left;}
<p class="box">
<p class="left"></p>
<p class="right"></p>
</p>

2.使用overflow:hidden 清除浮动

.box{ overflow: hidden;} //overflow:auto 也是可以的
.left,.right{ width:100px; height: 100px; background:#388bff; float: left;}
<p class="box">
<p class="left"></p>
<p class="right"></p>
</p>

3.使用空p

.clear{ clear:both; }
<p class=”clear”></p>