title: Why does this "clear: both" doesn't prevent wrapping?
body: <p>I suppose a <code>DIV</code> with <code>clear:both</code> style can make its parent containing DIV doesn't wrap, but below HTML seems not work in that way.</p>
  
  <p>If the browser window is narrow, the second <code>DIV</code> <code>"OK OK"</code> still wraps to next line.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style="overflow: hidden;"&gt;
    &lt;div style="float: left; overflow: hidden; white-space: nowrap"&gt;
      Hello world 1 Hello world 2 Hello world 3
    &lt;/div&gt;
    &lt;div style="float: left; overflow: hidden; white-space: nowrap"&gt;
      OK OK OK OK OK OK OK OK
    &lt;/div&gt;
    &lt;div style="clear: both;"&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Did I miss something?</p>