SOURCE

<div class="topDiv">
    <div class="textDiv">学完本小册，你会真正理解这些属性背后所涉及的图形学原理，之后你就可以灵活使用这些 CSS 属性实现各种 3D 特效了。</div>
    <div class="floatDiv">float left</div>
    <div class="clear"></div>
</div>
<div class="bottomDiv">但如果你不理解这些 CSS 属性背后的原理，那么很难随心所欲地实现各种复杂的 3D 特效。要想做到灵活运用，还是应该学习一些图形学知识。</div>

.topDiv {
    width: 500px;
    border: 2px solid black;
}
.floatDiv {
    width: 100px;
    height: 100px;
    border: 2px dotted red;
    color: red;
    margin: 4px;
    float: left;
}
.bottomDiv {
    width: 500px;
    height: 100px;
    margin: 5px 0;
    border: 2px dotted black;
}
.textDiv {
    color: blue;
    border: 2px solid blue;
}
// 区别在这里
.clear{
  clear:both;
}