chrome：内联块内浮动元素的“幽灵”宽度答案

【问题标题】：chrome: "ghost" width of floated elements inside inline blockchrome：内联块内浮动元素的“幽灵”宽度
【发布时间】：2013-02-14 15:11:06
【问题描述】：

测试用例http://codepen.io/anon/pen/hFumw.
在除 chrome 之外的所有浏览器中都能正常工作。在 chrome 中，.container 的宽度计算为 .child.one 元素不浮动。有什么办法可以解决这个问题吗？
HTML：

<div class="container">
  <div class="header">
  header
  </div>
  <div class="child one">
  </div>
  <div class="child one">
  </div>
  <div class="child one">
  </div>
</div>

CSS：

.container {
  background:red;
  padding:10px;
  display: inline-block;
  overflow:hidden;
  .child {
    width:100px;
    height: 100px;
    background: green;
    float:left;
    clear:left;
    border: 1px solid blue;
  }
  .one {
    float: left;
    clear:left;
    background:yellow;
  }
  .header {
    background:blue;
  }
}

UPD：

.header {
  float: left;
  width: 100%;
}

在我的特殊情况下是不可接受的。

【问题讨论】：

除了链接之外，请在您的问题中包含相关代码。链接很棒，但问题应该是自给自足的。
我找到了另一个“肮脏”的解决方案：在每个浮动 div 之间添加空的<div></div>

标签： html css google-chrome webkit

【解决方案1】：

遵循 CSS 似乎在 Chrome 和 FF 中运行良好。请参阅标头声明。

body {
  text-align: center;
}
.container {
  margin-left:auto;
  margin-right:auto;
  background:red;
  padding:10px;
  display: inline-block;
  overflow:hidden;
  .child {
    width:100px;
    height: 100px;
    background: green;
    float:left;
    clear:left;
    border: 1px solid blue;
  }
  .one {
    float: left;
    clear:left;
    background:yellow;
  }
  .two {
    float: right;
    margin-left:0px;
    clear: right;
  }
  .header {
    background:blue;
    display:block;
    float:left;
    width:100%;
  }
}

【讨论】：

伤心，但浮动标题在我的特殊情况下是不可接受的。
你能告诉我们这是为什么吗？
如果它是标题标签（例如
），我可以理解您的担忧，但它只是另一个 div。
在项目中有一些脆弱的定位技巧，依赖于这个块。最后我设法使用您的解决方案，谢谢！现在我只是好奇，为什么 webkit 会这样？

【解决方案2】：

尝试将此css添加到.header

clear:both;
float:left;
width:100%

【讨论】：

悲伤，但浮动标题在我的特定情况下是不可接受的。

），我可以理解您的担忧，但它只是另一个 div。