CSS浮动元素和溢出：隐藏；

前几天我注意到一些奇怪的行为，无法找到FF和Chrome在以下代码（JSFIDLE）上行为不同的答案或原因：

HTML:

FF：这些元素是相互关联的

铬：元素是浮动的

有什么想法吗？理解这种不一致的行为会很好。Thx！；）

---

Greetz

这是因为您的容器向左浮动，没有给定宽度。如果你添加元素，一些浏览器会将其扩展到最大宽度，但其他浏览器会将其扩展到ITA中最宽的元素的宽度。乍一看，我认为Chrome就是这样做的。Firefox将其呈现为

.two

具有

清晰的
样式：Thx@Pete和Passerby。是的，这可能是我必须指出的。浮动容器没有设置宽度，元素使用宽度：auto。因此浏览器使用不同的方法来计算宽度。谢谢！一个快速的统计测试表明Firefox是这里的最大偏差。IE和所有其他浏览器的行为都类似于Chrome.Thx，用于info@MrLister.：）
<div class="container">
  <div class="one">one</div>
  <div class="two">two</div>
</div>

.container {
 float: left;   
}
.container .one {
    width: auto;
    float: left;
    overflow: hidden;
    padding: 0 5px;
    height: 20px;
    border: 1px solid deeppink;
}

.container .two {
    width: auto;
    overflow: hidden;
    padding: 0 5px;
    height: 20px;
    border: 1px solid purple;
}