浮动 div 不会扩展到父 div 的全宽。为什么？

Question

根据BrainJar.com's positioning article的这段摘录

首先，被浮动的盒子应该有一个为它定义的宽度， 显式或隐式。否则，它将填充其 水平包含块，就像非浮动内容一样，离开 没有空间让其他内容在其周围流动。

但是在下面的代码中，这不会发生，即浮动 div 没有扩展到它的父容器全宽，并且浮动 div 上没有定义宽度。

HTML

    <div id="container">
         <div id="aqua">aqua</div> 
         <div id="yellow">yellow</div> 
         <div id="pink">pink</div>
    </div>

CSS

#container { border:1px solid red} 
#aqua, #yellow { border:1px solid green; float:left;}   
#pink { width:150px; border:1px solid blue; }

我有兴趣知道它背后的原因。

谢谢

Answer 1

为什么它在 Brainjar.com 中起作用是因为浮动内容填充了内容，因此如果浮动元素上省略了宽度，它们会扩展到其父宽度。

所以声明

否则，它将水平填充其包含块，就像 非浮动内容，没有空间让其他内容四处流动 它。

如果浮动元素为空或内容小于容器的宽度，则会出错。

更多关于花车的信息：https://developer.mozilla.org/en-US/docs/Web/CSS/float

用更多内容填充您的示例表明它是这样工作的。

#container { border:1px solid red} 
#blue, #aqua, #yellow { border:1px solid green; float:left;}   
#pink { width:150px; border:1px solid blue; }

#pink { clear: left }

<div id="container">
	 <div id="aqua">aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua aqua</div> 
	 <div id="yellow">yellow</div>
	 <div id="blue">blue</div>
	 <div id="pink">pink</div>
</div>

Answer 2

你是不是想填满整个宽度？或者你想要一个解释？

如果您只想要全宽，只需将 width: 100%; 添加到您的浮动 ID 中