浮动内容会破坏页面上的其他浮动

Question

我正在处理this page

上的“关于我们”标题

基本上那里带有图像和蓝色“关于我们”块的小div是一个图像，但是出于搜索引擎优化的目的，我现在用一个可以使用<h1>...</h1>标签的结构替换它。

正如您所看到的，图片和标题标记的布局完美无缺，但它会将内页的右侧列推到内容下。

我已经检查过，并且经过双重检查，看起来所有花车都被正确包含（除非我遗漏了一些东西），所以我不知道如何解决这个问题。

谁能告诉我这里我做错了什么？

HTML：

<div class="page_header">
    <div>
        <img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-1.jpg">
        <img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-2.jpg" alt="" />
        <img src="http://sela.netgendns.co.za/wp-content/uploads/2012/11/sela-about-us-3.jpg" alt="" />
        <h1>About Us</h1>
    </div>
</div>

CSS：

/* Page Headers
----------------------------*/
.page_header div {
   overflow: hidden;
    min-width: 665px;
}

.page_header img, .page_header h1 {
 float: left;
 margin: 10px 10px 0 0;        
}

.page_header img:nth-child(2) {
    clear:right;
}

.page_header h1.about-us {
 line-height: 90px;
 background: #00f;
 color: #fff;
 padding: 0 42px;
}

提前致谢！

Answer 1

这是因为您的<div id="sidebar-parimary">应该位于<div id="main">元素内。

目前是：

  <div id="main">
    <div id="content">...</div>
  </div>

  <div id="sidebar-primary">..</div>

它应该是：

  <div id="main">
    <div id="content">...</div>
    <div id="sidebar-primary">..</div>
  </div>

Answer 2

Hey Ortund实际上写了一个不正确的HTML标记，所以你应该这样写： -

<div id="main">
<div id="content">
<div id="sidebar-primary">
</div>

通过以下方法查看附图中的工作正常： -