html - 为什么这两个 div 没有按照我的预期显示？

Question

这个 jsfiddle 示例显示了我在说什么，我给有问题的 div 一个红色边框以显示它是如何显示的。

我希望#searchwrapper_3 div 进入#col_st_cautare 之一，但由于某种原因，它不是这样工作的。我已经盯着它看了一段时间了，我不知道为什么它会这样显示

我也有一个看起来不错的示例，因为我在此处的#searchwrapper div 之后添加了另一个元素。

问题已修复，如果仅包含浮动元素，则 div 将折叠。

Answer 1

如果一个 div 只包含浮动元素，它的高度就会塌陷。

您可以添加<div style="clear:both;">或使用本文中的一些技术，例如overflow:hidden：

<div style="border: 1px solid red;overflow:hidden" id="col_st_cautare">

Answer 2

你需要做一个clear:both;- 见http://jsfiddle.net/wzYry/3/的结尾

<div style="border: 1px solid red;" id="col_st_cautare">
    <div style="float: left;" id="searchwrapper_3">

        .... code ....

    </div>
    <div style="clear:both;"></div>
</div>​

clr附带说明一下，以您的风格上课可能会更容易。

.clr{clear:both;}

这样，您可以在需要清除的任何时候使用它

<div class='clr'></div>

Answer 3

发生这种情况是因为里面的子元素是浮动的，而父元素不知道如何包装它们。

可能是最简单的解决方法

#col_st_cautare { overflow: hidden; }

演示

除此之外，稳定的解决方案是<div style="clear:both;"></div>在关闭元素之前添加。