html - 这支笔的侧边栏在哪里？

Question

How can you fix sidebar issue here: http://codepen.io/chriscoyier/pen/ClGcF

body {
  padding: 30px;
}
header {
  background: lightblue;
}
section {
  background: lightgreen;
  width: 75%;
  float: left;
}
article {
  background: white;
  margin: 0 0 1rem 0;
}
aside {
  background: pink;
  width: 25%;
  float: right;
}
header,
article,
section,
.module {
  padding: 1rem;
}

<main>
  <header>
    <h1>Site</h1>
  </header>
  <section>
    <article>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
    </article>
    <article>
      <h2>Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nemo molestias ex officia eligendi reiciendis fuga magnam? Ullam ut ab doloremque accusamus iusto aliquam facilis sapiente!</p>
    </article>
  </section>
  <aside>
    <div class="module">
      <h3>Module</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio rem ab delectus fugit repellendus perspiciatis dolor consequuntur tenetur voluptatem a vitae odit aspernatur? Voluptas quisquam corporis nostrum aspernatur aliquid harum saepe ab pariatur
        veniam iste ipsam alias nemo voluptatibus doloribus.</p>
    </div>
  </aside>
</main>

目标是让侧边栏移回顶部。

我的困惑:

笔内的边栏在哪里？

Answer 1

<aside>是侧边栏部分。

在你的 CSS 中:

*,*:after,*:before { box-sizing: border-box; }

您可以通过以下链接阅读有关框大小调整的信息:http://www.paulirish.com/2012/box-sizing-border-box-ftw/