浮动 div 不占用全宽答案

【问题标题】：Floated div not taking full width浮动 div 不占用全宽
【发布时间】：2014-07-09 00:02:01
【问题描述】：

为什么浮动 div 不占用全宽？不还是块元素吗？

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，因为它占用的空间与其内容一样多。谁能解释一下？

【问题讨论】：

【解决方案1】：

你必须设置宽度：

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

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

【讨论】：

【解决方案2】：

这是因为 float 元素的行为类似于将display: inline-block 应用于它。它们扩展到其内容宽度。

正如@Alek 所说，如果要手动设置宽度，则需要显式设置。

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

【讨论】：