为什么这个“清楚：都是”不防止包装？ [英] Why this "clear: both" Doesn't Prevent Wrapping?

问题描述

我想一个DIV带有clear：both风格的DIV可以让它的包含DIV的父代不会换行，但是在HTML下面看起来并不是这样。

如果浏览器窗口很窄，第二个DIVOK 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 
< / div> 
< div style =clear：both;> 
< / div> 
< / div> 
  

我错过了什么？

解决方案

我想你可能会误解明确的财产。它并不具体控制包装，它控制后来浮动元素的位置。上面的html没有任何东西可以阻止第二个div流向下一行。

清除元素的一个很好的例子：
< a href =http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c =nofollow noreferrer> http：//www.builderau .com.au / program / css / print.htm？TYPE = story& AT = 339278136-339028392t-320002011c

为了不使布局流量，您可能必须在您的容器div上指定硬度宽度。

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?

解决方案

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.

这篇关于为什么这个“清楚：都是”不防止包装？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！