为什么这个"明确:两者"都不会阻止包装？

Question

我认为一个带有"clear:both"样式的DIV可以使其包含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

我想你可能会误解"清晰"的财产.它不能专门控制包装,它控制随后出现的浮动元素的位置.上面的html中没有任何内容阻止第二个div流向下一行.

这是关于清算元素的一个非常好的纲要:http://www.builderau.com.au/program/css/print.htm？ TYPE = story&AT = 339278136-339028392t-320002011c

为了使布局不流动,您可能必须在容器div上指定硬宽度.