Floated Element也将背景应用于其他div

Question

好吧所以标题很有意思，但这是我的设置。

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

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

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

#leftPanel {
      float: left;                      
  }

  #rightPanel {       
      background: blue;       
  }

Answer 1

你有一个没有定义div的{​​{1}}，这将延伸100％的窗口宽度（默认情况下）。

DEMO HERE

HTML：

width

CSS：

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

---

那么当你在#rightPanel { background: blue; } 面前漂浮时会发生什么？浮动div将允许下一个div与其位于同一行。

DEMO HERE

HTML：

div

CSS：

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

---

在这里你可以看到浮动的#leftPanel { float: left; } #rightPanel { background: blue; } 只是坐在那里，另一个div的背景不再是100％，因为我们现在给它的宽度。

DEMO HERE

HTML：

div

CSS：

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

我建议您查看this，详细了解浮点数的工作原理。