html - 为什么这个 "clear: both"不阻止换行？

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

我认为您可能误解了“clear”属性。它不专门控制换行，它控制随后出现的 float 元素的放置。上面的 html 中没有任何内容阻止第二个 div 流到下一行。

这里有一个关于清除元素的非常好的概述: http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

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