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

Question

的摘录

For one, the box being floated should have a width defined for it, either explicitly or implicitly. Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it.

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

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

你是不是看得太满了？或者你想要一个解释？

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

Answer 2

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

所以声明

Otherwise, it will fill its containing block horizontally, just like non-floated content, leaving no room for other content to flow around it.

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

更多关于浮动的信息：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>

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

Floated div does not expand to full width of parent div. Why?

css

css-float