SOURCE

<div class="father1">
    <div class="child1-1"></div>
    <div class="child1-2">当在父元素中只设定一个盒子浮动，另一个不浮动时，会造成第二个盒子在第一个盒子的下方，被覆盖掉一部分（但文字不会被覆盖）。</div>
</div>

<br />

<div class="father2">
    <div class="child2-1"></div>
    <div class="child2-2">给第2个元素设定bfc,当增加第一个块的宽度时，第二个块的宽度会自动缩小，实现宽度自适应。</div>
</div>

.father1 {
    width: 200px;
    border: 1px solid red;
}

.child1-1 {
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
}

.child1-2 {
    background-color: greenyellow;
    height: 150px;
}

.father2 {
    width: 200px;
    border: 1px solid red;
}

.child2-1 {
    width: 50px;
    height: 50px;
    background-color: pink;
    float: left;
}

.child2-2 {
    background-color: greenyellow;
    height: 150px;
    overflow: auto;
    word-break: break-all;
}