<style type="text/css">
.a, .b, .c {
box-sizing: border-box;
border: 1px solid;
}
.wrap {
width: 250px;
}
.a {
width: 100px;
height: 100px;
float: left;
}
.b {
width: 100px;
height: 50px;
float: left;
}
.c {
width: 100px;
height: 100px;
display: inline-block;
}
</style>
<div class="wrap">
<div class="a">a</div>
<div class="b">b</div>
<div class="c">c</div>
</div>请问 wrap 这个 div 的高度是多少？
display: inline-block; 那么c会直接和a重叠，虽然文本让出位置也就是c会出现在a的下边界下方. 但是高度仍然是100px.
这里的关键在于 display: inline-block 使得 C内部形成了BFC, BFC不与float元素重叠. 所以会出现在紧贴着a的右边界以及b的下边界的位置出现.
因为他都是向左浮动他的宽度是200，所以wrap的高度应该是，B+C=150px