漂浮的div没有占全宽

Question

为什么浮动的div不占全宽？它们不是仍然阻挡元素吗？

以下是http://jsfiddle.net/GKjC8/

的示例

HTML

<div id="a">a</div>
<div id="b">b</div>

CSS

div {
    background-color:cyan;
}
#a {
    float:left;
}
#b {
    clear:left;
}

a div看起来像是inline，因为它占用的内容与其内容一样多。有人可以解释一下吗？

Answer 1

你必须设置宽度：

#a {
   float: left;
   width: 100%;
}

  

“您应该始终在浮动项目上设置宽度（除非应用了）   直接到图像 - 具有隐式宽度）。如果没有设置宽度，   结果可能无法预测。“Floatutorial: Float Basics

fiddle

Answer 2

这是因为 float 元素的行为就像应用了display: inline-block一样。它们扩展到内容宽度。

正如@Alek所说，如果你想手动设置宽度，你需要明确设置它。

您可以查看this stackoverflow question了解更多信息