为什么要“清除:两者"?不会阻止包裹吗? [英] Why does this "clear: both" doesn't prevent wrapping?

问题描述

我想具有 clear:both 样式的 DIV 可以使其包含DIV的父级不自动换行，但在HTML之下似乎无法以这种方式工作.

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.

如果浏览器窗口狭窄，第二个 DIV "OK OK" 仍会换行到下一行.

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>

我错过了什么吗?

推荐答案

我认为您可能会误解"clear"属性.它不专门控制换行，而是控制随后出现的浮动元素的位置.上面的html中没有任何内容可以阻止第二个div流到下一行.

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.

这是清除元素方面的一个很好的总结: http://www.builderau.com.au/program/css/print.htm?TYPE=story&AT=339278136-339028392t-320002011c

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

为了不使布局流畅，您可能必须在容器div上指定一个硬宽度.

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

这篇关于为什么要“清除:两者"?不会阻止包裹吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！