使用 CSS，设置容器宽度以覆盖浮动元素答案

【问题标题】：Using CSS, set container width to cover floated elements使用 CSS，设置容器宽度以覆盖浮动元素
【发布时间】：2014-05-21 08:26:26
【问题描述】：

我现在要做的是创建一个容器（带有浮动元素），使其宽度适应适合的元素..

我能想到的最简单的例子是：一个容器填充了 300px * 300px 的浮动 div。只要 div 没有填满一行，容器的宽度（两者都清除）与 div 的组合宽度相同，或者 1 div = 300px，2 div = 600px 等等。但是，如果 div 不适合一行，它们会继续到下一行，即使第一行的 div 仅占（比方说）95%，容器的宽度仍保持为 100%。

是否有一种纯 CSS 方法可以使该容器不比其内容宽？

#main {
  float: left;
  background-color: #f00;
}

#main > :last-child:after {
  clear: both;
}

.float {
  width: 150px;
  height: 150px;
  float: left;
  background-color: #00f;
}

<div id="main">
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
  <div class="float"></div>
</div>

这是一个 JSfiddle：http://jsfiddle.net/j9A6T/ 你能把右边的红色部分丢掉吗？

我已经尝试在容器上使用 float/inline-block/table 解决方案，但它们在这种情况下不起作用。

【问题讨论】：

"jsfiddle.net的链接必须有代码，代码已经在jsfiddle了，要不要贴在这里？"是的，这正是消息的含义。
如果您想知道，重点是不要强迫回答者打开外部资源来回答问题。那，即使在外部链接失效后，您的问题也应该具有未来的意义。有很多关于这个的元帖子......
然后告诉他们将此解释添加到红色警告框中。代码不是必需的，我已经完成了一个工作 jsfiddle。这只是迫使我在帖子中添加更多内容或删除链接。
我认为“到 jsfiddle.net 的链接必须附有代码”消息很简单且足够好，但也许元帖子的链接可能对感兴趣的人有用。好吧，您可以随时通过MSO 提出建议（用feature-request 和/或discussion 标记它）。

标签： css

【解决方案1】：

clearfix（应用于您的容器 div）是否会有所帮助？

.clearfix:after {
   content: " "; /* Older browser do not support empty content */
   visibility: hidden;
   display: block;
   height: 0;
   clear: both;
}

更多：What is a clearfix?

【讨论】：

抱歉，好像还不够。