Why does this “clear: both” doesn't prevent wrapping?

问题

I suppose a DIV with clear:both style can make its parent containing DIV doesn't wrap, but below HTML seems not work in that way.

If the browser window is narrow, the second DIV "OK OK" still wraps to next line.

<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>

Did I miss something?

回答1:

I think you might be misunderstanding the "clear" property. It doesn't control wrapping specifically, it controls the placement of floating elements that come afterwards. There is nothing in your html above that is preventing the second div from flowing to the next line.

Here is a pretty good rundown on clearing elements: http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

In order to make the layout not flow, you will likely have to specify a hard width on your container div.

回答2:

Because the two inner divs are floated left, they will wrap when the browser window becomes too narrow. I would suggest that you specify a width on the outer div (the one you have overflow: hidden on). That way the two inner divs can float, but they won't wrap when the browser shrinks.

    <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>

If you want more control, you might have to implement the min-width hack using expressions in IE; min-width: works in FF.

回答3:

Add two new properties to your style & it will work !

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>

来源：https://stackoverflow.com/questions/788885/why-does-this-clear-both-doesnt-prevent-wrapping

标签

html

css

clear