html - 为什么 nav 元素环绕其上方的标签

Question

当我放置 <nav>在我的里面 <header>该元素似乎包裹了 <p></p>在它之上。

http://jsfiddle.net/otherDewi/u2xNN/

HTML

<header class="clearfix">
        <h1 id="heading">Main Heading</h1>
        <h2>Sub Heading</h2>
        <p>Tagline - Lorem ipsum dolor sit amet. Dolore, corporis.</p>

    <div id="home" class="landing">     

    </div><!--end #home-->
    <nav class="clearfix main-nav">
        <ul class="clearfix">
            <li><a href="#home">Home</a></li>
            <li><a href="#about">About</a></li>
            <li><a href="#video">Video</a></li>
            <li><a href="#contact">Contact</a></li>
        </ul>
    </nav>     
</header>

CSS

header {
    text-align: right;
}

header p {
    float: right;
}

.main-nav {
    width: 100%;
    background-color: #d3eafc;
}

.main-nav ul {
    clear: both;
    list-style: none;
    padding: 0;
    margin: 10px 0;
}

.main-nav ul li {
    float: left;
    list-style: none;
    width: 150px;
    border-right: 1px solid #999;
}

.main-nav a:link,
.main-nav a:visited {
    display: block;
    line-height: 30px;
    text-align: center;
    color: #fff;
    text-decoration: none;
}

Answer 1

知道了..

发生这种情况是因为 nav由于没有设置高度以及 <p>，栏正在折叠正在漂浮。

您有 2 个选项，要么添加一个 overflow ，或 float nav在<p>旁边

.main-nav {
    overflow: hidden;
}

或者..

.main-nav {
    float: right;
}

Updated jsFiddle