参见英文答案 >
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：
我知道的唯一解决方案是给#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>
