为何无内外边距的div宽度坍缩为0？WebKit 18.2渲染疑问

基础现象与代码示例 #

有一个包含.header和.content的容器结构，当.header设置为float: left且width: 100%，.content设置为display: block且overflow: auto时，.content的宽度会坍缩为0，停留在.header右侧，无法自动换行到下方。

HTML代码：

<div class="wrapper">
    <div class="header">Header</div>
    <div class="content">Content</div>
</div>

CSS代码：

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

.content {
  display: block;
  overflow: auto;
}

内外边距修复宽度的原因 #

当给.content添加margin: 1px或padding: 1px时，它会自动扩展至合适宽度并换行到.header下方，核心原因和**块级格式化上下文（BFC）**有关：

• overflow: auto会为.content创建BFC，BFC的规则是元素不会与浮动元素重叠。
• 初始状态下，.header占满容器100%宽度，.content的可用水平空间为0，因此宽度坍缩。但添加内外边距后，BFC元素的盒模型（内容+内边距+边框+外边距）需要的空间超过了当前可用的0宽度，浏览器会触发换行逻辑，将.content放到浮动元素.header的下方。此时.content的可用空间变为容器的100%宽度，自然会扩展到合适的宽度。
• 另外，将overflow设为visible也能解决问题，因为visible不会创建BFC，此时.content会按照普通块级元素的规则，自动换行到浮动元素下方并占满宽度。

WebKit 18.2版本的行为变更 #

升级到WebKit 18.2后，仅添加margin不再能修复宽度问题，只有padding可以让元素扩展至全宽。这是WebKit渲染逻辑调整导致的：

• 旧版本中，浏览器判断BFC元素的margin所需空间超过可用宽度时，会触发换行。但在18.2版本中，WebKit可能调整了BFC元素与浮动元素相邻时的外边距处理逻辑——认为外边距可以“溢出”到浮动元素的区域（视觉上不可见），因此不会触发换行。
• 而padding属于元素自身盒模型的一部分，是元素必须容纳的空间，当可用宽度不足以容纳padding+内容时，浏览器仍然会触发换行，因此padding依然能修复问题。

内容的提问来源于stack exchange，提问作者amanda