Float + Padding =麻烦

Question

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

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 */

Answer 2

.body{padding-left:35% //whatever you want }

Answer 3

给浮动：左;对.body来说就足够了

Answer 4

在CSS中为标题添加margin-right。

以下是示例

header {
background: #CAE5FF;
float:left;
height: 100%;
color: gray;
margin-right: 10px;
}

Answer 5

您在1%上指定的div.body的填充效果非常好。

问题在于header是浮动的并且没有宽度。此外，div.body没有浮动。因此，div.body占用所有宽度，而内容因左浮动header而移位。

这可以在这里看到：http://jsfiddle.net/2fyqqwjx/1/

查看div.body的绿色边框？

一个非常简单的解决方案（使用您当前的标记）将为header提供宽度，并为margin-left提供等效的div.body：

* { box-sizing: border: box; }
html, body {
    height: 100%; overflow: hidden;
}
header {
    float: left;
    height: 100%;
    width: 20%; /* give a fixed width here */
}
.body {
    padding: 1%; margin-left: 20%; /* give a margin-left equivalent to header width */
}

查看此演示：http://jsfiddle.net/uc0rh9d0/1/