html - float + 填充 = 麻烦

Question

我遇到一个问题，其中一个元素是 float 的，我无法在同一行上为另一个元素设置填充，因为它出现在开头而不是我想要的位置。

FIDDLE

HTML

<header>
        <h1>John Doe</h1>

    <nav>
        <ul>
            <li>Home</li>
            <li>About</li>
            <li>Game</li>
            <li>Contact</li>
        </ul>
    </nav>
</header>
<div class='body'>
    <section class="body_heading">
            <h2>About Me</h2>

    </section>
    <aside>
        <section>Lorem ipsum</section>
    </aside>
    <section class="body_content">lorem ipsum</section>
</div>

CSS

html, body {
    min-height: 100%;
}
body {
    background: #f1f1f1;
}
header {
    background: #CAE5FF;
    float:left;
    height: 100%;
    color: gray;
}
header > * {
    padding: 5% 15%;
}
header > nav {
}
header > nav > ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
header > nav > ul > li {
}
.body {
    padding: 1%;
}
aside {
    float: right;
}

问题出在标题和 .body 元素之间我想留一点空间，但填充不影响它。

Answer 1

使用以下选项

.body{overflow:hidden;} /* or */
.body{margin-left:125px;} /* width of left contents + 10 or 20 for some space */