当浮动属性设置为“无”时，CSS背景图像消失答案

【问题标题】：CSS background image disappears when float property is set to 'none'当浮动属性设置为“无”时，CSS背景图像消失
【发布时间】：2013-04-15 20:44:00
【问题描述】：

我有一系列三个盒子，每个盒子大约是屏幕宽度的三分之一。前两个框的宽度为 33.333%，向左浮动。我已经删除了第三个盒子上的浮动并将宽度设置为auto，以便它填充剩余的水平空间。但是，这样做会导致背景图像消失。我创建了一个 Fiddle 来展示这种效果。

HTML 非常简单：

<div></div>
<div></div>
<div></div>

这是 CSS：

div {
  float: left;
  width: 33.333%;
  height: 120px;
  background: #EEE url('http://upload.wikimedia.org/wikipedia/commons/thumb/a/ac/Approve_icon.svg/200px-Approve_icon.svg.png') no-repeat center center;
  background-size: 100px 100px;
}

div:nth-child(2) {
  border-left: 1px solid black;
  border-right: 1px solid black;
}

div:nth-child(3) {
 float: none;
 width: auto;
}

有什么想法吗？

【问题讨论】：

标签： css css-float background-image

【解决方案1】：

使用overflow: hidden解决这个问题：

div:nth-child(3) {
    float: none;
    width: auto;
    overflow: hidden;
}

你没有得到它的原因是，当你给width: auto时，他们肯定会因为floated元素而失去他们的widths。

小提琴：http://jsfiddle.net/praveenscience/aMwk9/1/

【讨论】：

+1 – 两个答案都是正确的 – 很难选择“正确”的答案。谢谢！
"当一个元素浮动时，它们会失去宽度。"什么？
@xec 他们变成了inline-block。
@PraveenKumar 为什么他们会失去宽度？显然，浮动保留了 33%
@PraveenKumar 确切地说，但这不是你的回答所说的。浮动的 div 没有失去宽度，非浮动的 div 没有，但不是因为浮动与否……如果您修改答案，我将删除反对票。

【解决方案2】：

您需要添加overflow: hidden:

div:nth-child(3) {
 float: none;
 width: auto;
 overflow: hidden;
}

如果没有这个指令，第 3 个 DIV 不会填充剩余空间，但也会与其他 DIV 重叠。

【讨论】：