请问 wrap 这个 div 的高度是多少？

<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