HTML容器元素没有高度

参见英文答案 > How come my float elements aren’t within their parent2个
我的模板的标题部分没有获得其嵌套元素的高度.

<header id="header">
    <div id="header-inner">
        <div id="top-left">
            <a href="#" title="something" rel="home">Site Title</a>
        </div>

        <nav id="top-right">
            <div class="menu">
                <ul>
                    <li class="current_page_item"><a href="#">Home</a></li>
                    <li class="page_item page-item-2"><a href="#">Home2</a></li>
                </ul>
            </div>
        </nav>
    </div>
</header>

#header {width:100%; float:left;}
#header-inner {width:600px; margin:0 auto;}
#top-left {float:left;}
#top-right {float:right;}

我也做了一个jsfiddle：

http://jsfiddle.net/hqpb3cyc/

我知道的唯一解决方案是给#header和/或#header-inner float：left;或显示：内联块;但我认为这不是正确的方法！？

希望可以有人帮帮我

最好的祝福

解决方法

你必须清除漂浮物.例如：

<br style="clear: both" />

#header {
  width: 100%;
  float: left;
  background: #D3D3D3;
}
#header-inner {
  width: 600px;
  margin: 0 auto;
}
#top-left {
  float: left;
}
#top-right {
  float: right;
}

<header id="header" role="banner">
  <div id="header-inner">
    <div id="top-left">
      <a href="#" title="something" rel="home">Site Title</a>
    </div>

    <nav id="top-right">
      <div class="menu">
        <ul>
          <li class="current_page_item"><a href="#">Home</a>
          </li>
          <li class="page_item page-item-2"><a href="#">Home2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
  <!-- clear both floats -->
  <br style="clear: both" />
</header>

Addinional你可以使用伪元素：after清除浮点数：

#header {
  width: 100%;
  float: left;
  background: #D3D3D3;
}
#header-inner {
  width: 600px;
  margin: 0 auto;
}
#top-left {
  float: left;
}
#top-right {
  float: right;
}
#header-inner:after {
  content: "";
  clear: both;
}

<header id="header" role="banner">
  <div id="header-inner">
    <div id="top-left">
      <a href="#" title="something" rel="home">Site Title</a>
    </div>

    <nav id="top-right">
      <div class="menu">
        <ul>
          <li class="current_page_item"><a href="#">Home</a>
          </li>
          <li class="page_item page-item-2"><a href="#">Home2</a>
          </li>
        </ul>
      </div>
    </nav>
  </div>
</header>

原文地址：https://www.jb51.cc/html/226070.html