Почему это «ясно: оба» не предотвращает упаковку?

Question

Я полагаю, что DIV с стилем «clear: both» может сделать свой родитель, содержащий DIV, не обертывать, но под HTML кажется, что это не работает.

Если окно браузера является узким, второй 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

Поскольку два внутренних divs перемещаются влево, они будут обертываться, когда окно браузера становится слишком узким. Я бы предположил, что вы указываете ширину на внешнем div (тот, который вы переполняете: скрытый). Таким образом, два внутренних 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> 

Если вы хотите большего контроля, вам может потребоваться реализовать хаб min-width с использованием выражений в IE; min-width: работает в FF.

Answer 2

Я думаю, что вы можете не понимать «ясное» свойство. Он не контролирует упаковку специально, он контролирует размещение плавающих элементов, которые потом появляются. В вашем html ничего нет, что предотвращает переход второго div на следующую строку.

Вот очень хороший изношенном по очистке элементов: http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

Для того, чтобы сделать макет не течь, вы, вероятно, придется указать жесткую ширину на вашем контейнер DIV.

Answer 3

Добавьте два новых свойства в ваш стиль & он будет работать!

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>