title: Do floated elements create a separate stacking context like positioned ones do?
body: <p>Recently I lit upon <a href="http://webdesign.tutsplus.com/articles/what-you-may-not-know-about-the-z-index-property--webdesign-16892" rel="noreferrer">an interesting article about the CSS z-index property</a>. I found it because I was seeking for an answer about why overflowed text from a preceding div was displayed above the background of a following div but not above the background of a span in the following div, like here (<a href="https://jsfiddle.net/1mk658eo/3/" rel="noreferrer">jsfiddle</a>):</p>
  
  
  
  <pre class="lang-css prettyprint-override"><code>#overflowed {
    background-color: green;
    width: 300px;
    height: 100px;
  }
  #non-floated {
    background-color: pink;
    width: 300px;
  }
  #non-floated span {
    background-color: yellow;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/dteN1.png" rel="noreferrer"><img src="https://i.stack.imgur.com/dteN1.png" alt="an inline box inside a block box"></a></p>
  
  <p>The explanation for this is the fact that a browser draws elements in a specific order, which is based on the so-called stacking order:</p>
  
  <p><a href="https://i.stack.imgur.com/4yHZs.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4yHZs.png" alt="the stacking order of a HTML/CSS layout in a browser"></a></p>
  
  <p>So for the root-element in a layout and every positioned element, the browser creates such stacking order and then draws all these orders in, sorry for the pun, the respective order.</p>
  
  <p>So this is why <em>inline elements and text</em> (those which create <strong>inline boxes</strong>) are drawn above block level elements, even if these block elements appear later in a document, like in my jsfiddle above.</p>
  
  <hr>
  
  <p><strong>So the question itself</strong>.</p>
  
  <p>I still cannot find an answer why these <strong>inline boxes</strong>, if they are created, for inline elements and text inside a floated element are not drawn with other inline boxes which are outside the floated element according the the scheme of the stacking order above, like here (<a href="https://jsfiddle.net/1mk658eo/5/" rel="noreferrer">jsfiddle</a>):</p>
  
  <pre class="lang-css prettyprint-override"><code>#overflowed {
    background-color: green;
    width: 300px;
    height: 100px;
  }
  #floated {
    background-color: pink;
    width: 300px;
    float: left;
  }
  #floated span {
    background-color: yellow;
  }
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/Kb2yV.png" rel="noreferrer"><img src="https://i.stack.imgur.com/Kb2yV.png" alt="enter image description here"></a></p>
  
  <p>Here you can clearly see, that the text from the first div in the document, which is not floated, is drawn above (after) the span's yellow background, while the span is an inline element and according to the image of the stacking order above is supposed to be drawn after the floated container (its background and borders).</p>
  
  <p>So does anyone have an proven explanation for this? I suppose that floated elements create something like their own stacking order, like positioned elements do, but I have not found any mention of this in the web yet.</p>