css - 为什么 div 不在前一个 div 之后开始？

Question

我正在修改 WordPress 主题的标题部分，并且试图在另一个 div 中嵌套几个 div。我对 HTML/CSS 不是很有经验，但我观察到的东西对我来说似乎很奇怪。

我的代码如下所示:

<div class="extras">
    <div id="search"> 
        <form role="search" method="get" id="searchform" action="http://mentatescholars.com/" >
            <input type="search" placeholder="Search" value="" name="s" id="s" />
            <input type="submit" id="searchsubmit" value="Search" />
        </form>
    </div><!-- end #search -->
    <div class="phone-number">
        <div class="phone-number-main">1-885-MENTATE</div>
        <div class="phone-number-sub">1-885-636-8283</div>
    </div>
</div>

在图片中我有 phone-number使用 Firefox 的检查器选择的 div(选择 extras 看起来相同)。让我感到奇怪的是为什么它从 extras 的顶部开始div 而不是在 search 之后分区 search甚至设置了 40px 的高度。



如果我选择第三个 div，那么它会显示在前一个 div 之后开始的 div。



同样让我感到奇怪的是如何，而 phone-number-main 的顶部div 与 extras 齐平，文本完美地向下移动，而我没有做任何事情。

我的问题是:我怎样才能做到 phone-number div 在 search 之后开始div？

这是网站，如果您想查看它: http://mentatescholars.com/ .

Answer 1

#search float 和 .phone-number不是。
如果您添加 clear:both到 .phone-number <div />您将看到正确的布局。
float从文档流中删除元素。查看此链接了解更多信息:http://www.alistapart.com/articles/css-floats-101/