<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>
Copy the code

What is the height of the wrap div?

 

display: inline-block; So c is going to overlap a directly, even though the text is going to give way so that C is going to appear below the lower boundary of A. But the height is still 100px.

The key here is that display: inline-block causes C to form a BFC inside, which does not overlap the float element. So it’s going to be close to the right boundary of A and the lower boundary of B.

 

Since it floats to the left and its width is 200, the height of the wrap should be B+C=150px