title: How does the CSS Block Formatting Context work?
body: <p>How does the <a href="http://www.w3.org/TR/CSS2/visuren.html#block-formatting" rel="noreferrer">CSS Block Formatting Context</a> work? </p>
  
  <p>CSS2.1 specifications says that in a block formatting context, boxes are laid out vertically, starting at the top. This happens even if there are floated elements in the way, except if the block box established a new block formatting context. As we know, when browsers render block boxes in a block formatting context, the floated element is omitted, why does establishing a new block formatting context work?</p>
  
  <p>How are boxes (block boxes and inline boxes) laid out in the normal flow? </p>
  
  <p>I read somewhere that block elements generate block boxes, but floating elements are ignored when a user agent draws box and take them into account when they fill out content. Whilst floating elements will overlap other elements's boundary of the boxes, the solution is establishing a new block formatting context for the overlapped elements using <code>overflow:hidden</code>.</p>
  
  <p>"New block formatting context is still block formatting", so when drawing a box, it will also treat the floating element as if it doesn't exit. Is that right or have I misunderstood "new block formatting context?"    </p>
  
  <h2>Update:more questions</h2>
  
  <blockquote>
    <p>By saying "It's this behaviour that's useful for columnar style layouts. The main use of it however is to stop floats, say in a "main content" div, actually clearing floated side columns, i.e. floats that appear earlier in the source code."</p>
  </blockquote>
  
  <p>I don't understand the meaning, I will provide an example, maybe you will understand me.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content {
    background: #eee;
    color #000;
    border: 3px solid #444;
    width: 500px;
    height: 200px;
  }
  .float {
    background: rgba(0, 0, 255, 0.5);
    border: 1px solid #00f;
    width: 150px;
    height: 150px;
    float: right;
  }
  p {
    background: #444;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
    &lt;h3&gt;This is a content box&lt;/h3&gt;
    &lt;p&gt;It contains a left floated box, you can see the actual content div does go under the float, but that it is the &amp;lt;h3&amp;gt; and &amp;lt;p&amp;gt; &lt;b&gt;line boxes&lt;/b&gt; that are shortened to make room for the float. This is normal behaviour.&lt;/p&gt;
    &lt;div class="float"&gt;floated box&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I thought the floating box should float to the top of the containg block-the div with class <code>content</code>. Besides, if the floating box appears earlier in the markup, then it will display what I think it should be.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.content {
    background: #eee;
    color #000;
    border: 3px solid #444;
    width: 500px;
    height: 200px;
  }
  .float {
    background: rgba(0, 0, 255, 0.5);
    border: 1px solid #00f;
    width: 150px;
    height: 150px;
    float: right;
  }
  p {
    background: #444;
    color: #fff;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="content"&gt;
    &lt;div class="float"&gt;floated box&lt;/div&gt;
    &lt;h3&gt;This is a content box&lt;/h3&gt;
    &lt;p&gt;it contains a left floated box, you can see the actual content div does go under the float, but that it is the &amp;lt;h3&amp;gt; and &amp;lt;p&amp;gt; &lt;b&gt;line boxes&lt;/b&gt; that are shortened to make room for the float, this is normal behaviour&lt;/p&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>How can we explain this? Can we use "block formatting context and inline formatting context" to explain it?</p>