背景颜色浮动对齐

Question

我这里有这个代码 https://jsfiddle.net/ 为什么黄色不会散布在所有三个元素上？考虑所有元素都在div标记内。

<div id="whole">
<p id="p1">
header
</p>
<p id="p2">
paragraph
</p>
<p id="p3">
paragraph 2
</p>
</div>

的CSS：

#whole{
  background:yellow;
}
#p1,#p2,#p3{
  float:left;
}