Question

测试用例http://codepen.io/anon/pen/hFumw。
适用于所有浏览器，除了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%;
}

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

Answer 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%;
  }
}

Answer 2

尝试将此css添加到.header

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

chrome：内联块内浮动元素的“ghost”宽度

2 个答案: