SOURCE

<h1>正常情况</h1>
<div class="father1">
     <div class="son1-1"></div>
     <div class="son1-2"></div>
</div>

<br />
<h1>加了浮动之后</h1>
<h5>可以看到，父元素的高度变成了0了</h5>
<div class="father2">
     <div class="son2-1"></div>
     <div class="son2-2"></div>
</div>

<br /><br /><br /><br />
<h1>使用bfc解决浮动</h1>
<div class="father3">
     <div class="son3-1"></div>
     <div class="son3-2"></div>
</div>

body {
    white-space: nowrap;
}
.father1 {
    width: 150px;
    border: 1px solid red;
}

.son1-1, .son1-2 {
    width: 50px;
    height: 50px;
    background-color: pink;
}

.son1-2 {
    background-color: purple;
}

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

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

.son2-2 {
    float: right;
    background-color: purple;
}

.father3 {
    width: 150px;
    border: 1px solid red;
    overflow: hidden;
}

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

.son3-2 {
    float: right;
    background-color: purple;
}