html - float 的 div 不占用全宽

Question

为什么 float div 不占满宽度？它们不是仍然是 block 元素吗？

这是一个例子 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 看起来像是内联，因为它占用的空间与其内容一样多。谁能解释一下？

Answer 1

你必须设置宽度:

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

“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.” Floatutorial: Float Basics

fiddle