title: Browser block float logic of different heights
body: <p>What is the browsers logic to position elements like this:</p>
  
  <p><a href="https://i.stack.imgur.com/3G8m1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3G8m1.png" alt="enter image description here"></a></p>
  
  <p>Basically, as I understand this can be recreated without bootstrap with a simple container block and and <code>width: 33.333333%</code> blocks of different heights. Why is the <code>d</code> block not floating to the left, under <code>a</code> block?</p>
  
  <p>Fiddle: <a href="https://jsfiddle.net/8qbuczau/" rel="nofollow noreferrer">https://jsfiddle.net/8qbuczau/</a></p>