BFC（块级格式化上下文）

<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>

如果C 没有 display: inline-block; 那么C会直接和a重叠，虽然文本让出位置也就是c会出现在a的下边界下方. 但是高度仍然是100px.
这里的关键在于 display: inline-block 使得 C内部形成了BFC, BFC不与float元素重叠. 所以会出现在紧贴着a的右边界以及b的下边界的位置出现.
因为b下面还有一块没有被填啊，那一块被填了之后才是另起一行。

display:inline-block会形成BFC，即块级格式化上下文，它是一个独立渲染的区域，并且与外部区域毫不相干，不会与浮动元素重叠。
因此会排在b后面，但是父盒子规定了宽度，所以就会飘下来。
如果b的高度大于a，那么就在a下面

c设置 display: inline-block开启BFC，开启BFC的元素不会被浮动元素覆盖，c是行内块元素（元素排列在一行，支持宽高和内外边距的设置），因此它将排在b元素之后，外部容器的宽度不够，因此排列在a之后，b的下面，外部容器的高度由此被撑开。

BFC不会与浮动元素重合
BFC是块级格式化上下文，生成BFC条件：

1.浮动
2.position不为static或relative
3.overflow不为visible
4.display为inline-block、table-cell、flex、table-caption或者inline-flex