css - float 元素也将背景应用到其他 div

Question

好吧，标题有点令人困惑，但这是我的设置。

<div id="leftPanel">
   // blah blah
</div>

<div id="rightPanel">
   // blah blah
</div>

我将右面板 float 到左面板旁边。当我将背景 CSS 应用于 rightPanel 时，它会流过并且也适用于 leftPanel。为什么是这样？是因为我没有定义宽度吗？当我定义宽度时，它的行为就好像 float-left 没有到位。

#leftPanel {
      float: left;                      
  }

  #rightPanel {       
      background: blue;       
  }

Answer 1

没错，你有一个没有定义 width 的 div，这将拉伸(stretch) 100% 的窗口宽度(默认情况下)。

DEMO HERE

HTML:

<div id="rightPanel">
   // blah blah
</div>

CSS:

#rightPanel {
    background: blue;
}

---

那么当你在它前面 float 一个 div 时会发生什么？ float 的 div 将允许下一个 div 与其位于同一行。

DEMO HERE

HTML:

<div id="leftPanel">// blah blah</div>
<div id="rightPanel">// blah blah</div>

CSS:

#leftPanel {
    float: left;
}
#rightPanel {
    background: blue;
}

---

在这里你可以看到 float 的 div 只是坐在那里，而另一个 div 的背景由于我们现在给定的宽度不再是 100%

DEMO HERE

HTML:

<div id="leftPanel">// blah blah</div>
<div id="rightPanel">// blah blah</div>

CSS:

#leftPanel {
    float: left;
}
#rightPanel {
    background: blue;
    width: 32px;
}

我建议看一下 this了解更多关于 float 如何工作的信息。