浮动元素下降到另一个浮动元素下方

Question

我想知道为什么 main 文章下降到 sidebar1 以下，为什么 sidebar2 出现在 sidebar1 之后。

main文章向左浮动，没有宽度。

怎么没有足够的 space 来排在 sidebar1 旁边？

解释一下原因会有很大帮助。

* {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
.sidebar1 {
  background-color: cyan;
  float: left;
  width: 20%;
  padding: 0 20px 0 10px;
}
.main {
  background-color: green;
  float: left;
}
.sidebar2 {
  background-color: red;
}

<div class="contentWrapper">
  <!-- first sidebar goes here -->
  <aside class="sidebar1">
    <h2>Sidebar 1</h2>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor.</p>
    <h3>Secondary Header</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
    <h3>Secondary Header</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
  </aside>
  <!-- main content goes here -->
  <article class="main">
    <h2>Article Title</h2>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
    <p>Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.</p>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
    <h3>Subheading</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
    <h3>Subheading</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra
      mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet,
      nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet
      luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tor</p>
  </article>
  <!-- second sidebar goes here -->
  <aside class="sidebar2">
    <h2>Sidebar 2 </h2>
    <ul>
      <li>Aenean orci ante</li>
      <li>Venenatis non adipiscing vita</li>
      <li>Fringilla et neque</li>
      <li>Aenean orci ante</li>
      <li>Venenatis non adipiscing vita</li>
      <li>Fringilla et neque</li>
    </ul>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus
      elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit.</p>
    <p>Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem,
      in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.</p>
  </aside>
</div>

Answer 1

你错过了一些东西：

将 content 的宽度设置为 80%（将 sidebar1 设置为 20%），否则浮动框的宽度将由其内容决定，并且然后
清除 content 之后的浮动：
```
<div style="clear:both"></div>
```

好了！

* {
 -moz-box-sizing: border-box;
 box-sizing: border-box; 
}

.sidebar1 {
 background-color: cyan;
 float: left;
 width: 20%;
 padding: 0 20px 0 10px;
}

.main {
 background-color: green;
 float: left;
    width: 80%;
}

.sidebar2 {
 background-color: red;
}

<div class="contentWrapper">
  <!-- first sidebar goes here -->
  <aside class="sidebar1">
   <h2>Sidebar 1</h2>
   <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.  </p>
     <h3>Secondary Header</h3>
     <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.  </p>
     <h3>Secondary Header</h3>
     <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. </p>
  </aside>
  <!-- main content goes here -->
  <article class="main">
   <h2>Article Title</h2>
   <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum.</p>
    <p>Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. </p>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. </p>
     <h3>Subheading</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. </p>
    <h3>Subheading</h3>
    <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor. Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tor</p>
  </article>
        <div style="clear:both"></div>
  <!-- second sidebar goes here -->
  <aside class="sidebar2">
   <h2>Sidebar 2 </h2>
   <ul>
       <li>Aenean orci ante</li>
       <li>Venenatis non adipiscing vita</li>
       <li> Fringilla et neque</li>
       <li>Aenean orci ante</li>
       <li>Venenatis non adipiscing vita</li>
       <li> Fringilla et neque</li>
     </ul>
     <p>Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit. </p>
     <p>Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.Suspendisse vitae quam lorem, in tempus velit. Sed vitae ante quis felis fringilla condimentum. Aenean orci ante, venenatis non adipiscing vitae, fringilla et neque. In pharetra, eros imperdiet luctus imperdiet, nunc sem pharetra mi, vel faucibus elit risus id tortor.</p>
  </aside>
 </div>

Answer 2

你的问题的答案有很大的提示。

您写道：

The main article is floated to the left and has no width.

嗯，您应该始终设置浮动元素的宽度。

The box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it.

_{source:
http://www.brainjar.com/css/positioning/default3.asp}

You should always set a width on floated items (except if applied directly to an image – which has implicit width). If no width is set, the results can be unpredictable.

_{source:
http://css.maxdesign.com.au/floatutorial/introduction.htm}

其他参考资料：

CSS Float Theory: Things You Should Know~粉碎杂志
9.5 Floats~W3C

浮动元素下降到另一个浮动元素下方

Floated element dropping below another floated element

html

css

css-float