Question

的摘录

首先，浮动的盒子应该有一个为它定义的宽度，明示或暗示。否则，它将填补它水平包含块，就像非浮动内容一样，离开没有其他内容可以绕过它的空间。

但是在下面的代码中，这不会发生，即浮动的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

用更多内容填充您的样本表明它的工作原理就是这样。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

你看起来是否也填满了整个宽度？或者你想要一个解释？

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

即可

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

2 个答案: