なぜこの "clear：both"が折り返しを防止しないのですか？

Question

"クリア：両方"スタイルのDIVがDIVを含む親をラップすることはできませんが、HTMLの下はそのようには動作しないようです。

ブラウザウィンドウが狭い場合、2番目のDIV「OK OK」は引き続き次の行に折り返されます。

<div style="overflow: hidden;"> 
     <div style="float: left; overflow: hidden; white-space: nowrap"> 
         Hello world 1 Hello world 2 Hello world 3 
        </div> 
     <div style="float: left; overflow: hidden; white-space: nowrap"> 
       OK OK OK OK OK OK OK OK 
        </div> 
     <div style="clear: both;"> 
     </div> 
    </div> 

私は何かを見逃しましたか？

Answer 1

2つの内部divは左にフローティングされているため、ブラウザウィンドウが狭すぎるとラップされます。私はあなたが外側のdiv（overflowを持っているもの：hidden on）の幅を指定することをお勧めします。こうすることで、2つの内部divが浮動することができますが、ブラウザが縮小するとラップされません。

<div style="overflow: hidden; width: 600px;"> 
      <div style="float: left; overflow: hidden; white-space: nowrap"> 
        Hello world 1 Hello world 2 Hello world 3 
       </div> 
      <div style="float: left; overflow: hidden; white-space: nowrap"> 
          OK OK OK OK OK OK OK OK 
       </div> 
      <div style="clear: both;"> 
      </div> 
    </div> 

さらに制御したい場合は、IEで式を使用して最小幅のハックを実装する必要があります。 min-width：FFで動作します。

Answer 2

あなたは「クリア」プロパティを誤解している可能性があります。ラッピングを具体的に制御することはありません。後で来る浮動要素の配置を制御します。上記のHTMLには、2番目のdivが次の行に流れるのを防ぐものは何もありません。レイアウトが流れないようにするために http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

が、あなたはおそらく、あなたのコンテナのdivのハード幅を指定する必要があります：

はここでクリアする要素にかなり良いランダウンです。

Answer 3

あなたのスタイルに2つの新しいプロパティを追加してください。&それは動作します！

text-align: left; 
    width: 1010px; 

    <div style="float: left; overflow: hidden; white-space: nowrap; 
        text-align: left;width: 1010px;"> 
        Hello world 1 Hello world 2 Hello world 3 
       </div> 

       <div style="clear: both;"> 
       </div> 
       <div style="float: left; overflow: hidden; white-space: nowrap; 
         text-align: left;width: 1010px;"> 
         OK OK OK OK OK OK OK OK 
         </div> 
         <div style="clear: both;"> 
         </div> 
         </div>