Question

This jsfiddle example显示了我正在谈论的内容，我给有问题的div一个红色边框以显示它是如何显示的。

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

我也有一个看起来很好的例子，因为我在#searchwrapper div here之后添加了另一个元素。

问题是固定的，如果div只包含浮动元素，则它将崩溃。

Answer 1

如果div只包含浮动元素，它的高度将会崩溃。

您可以添加<div style="clear:both;">或使用this article中的某些技巧，例如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; }

Demo

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

为什么这两个div不显示我对它的期望？

3 个答案:

Demo