css - 列跨度 : all conflicts with overflow and float

Question

CSS 属性 column-span: all 似乎在 overflow: hidden 或 float: left|right 出现时立即停止工作在容器上设置:

<div>
    <h2>Spanning Header</h2>
    <p>Lorem ipsum dolor …</p>
</div>

和

div {
    column-count: 2;
    column-gap: 2em;
    float: left; /* or */
    overflow: hidden;
}
h2 {
    /* will not work */
    -webkit-column-span: all;
}

这是初始(工作)版本:http://jsfiddle.net/8y67gqya/
这都不行:http://jsfiddle.net/rL3m59gk/也不是这个:http://jsfiddle.net/rL3m59gk/1/

这是否有合乎逻辑的原因或解释？
还是我遗漏了什么？

编辑:此错误出现在 Google-Chrome 中而非 Safari 中……(现在无法测试 IE)

Answer 1

这是让 column-span 在 Google Chrome 中工作的一种方法。

将整个 div 包裹在 block 级容器 div.wrap 中，并对其应用 float 或 overflow 属性。

将 column 属性应用于子 .panel block 。

<div class="wrap">
    <div class="panel">
         <h2>Spanning Header</h2>
        <p>Lorem ipsum dolor s...</p>
    </div>
</div>

对于 CSS:

div.wrap {
    float: left;
    width: 600px;
    overflow: auto;
    border: 1px dotted blue;
}
div.panel {
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 2em;
    column-gap: 2em;
}
h2 {
    -webkit-column-span: all;
    border: 1px dotted blue;
}

参见演示:http://jsfiddle.net/audetwebdesign/aq6gpmf4/

我认为在您的原始示例中发生的事情是，当您应用 float: left 或 overflow: {hidden|auto} 时，您正在建立一个新的 block 格式化上下文，这似乎会阻止 column-span 正常工作。

我不确定为什么会这样，但最好的线索来自 Mozilla 文档页面:

https://developer.mozilla.org/en-US/docs/Web/CSS/column-span#Values

column-span: all 值为 h2 建立了一个新的 block 格式化上下文。所以我的猜测是，float: left 引起的 div 上的 block 格式化触发器干扰了 column-span: all 引起的 block 格式化触发器 在 h2 上，因此该算法仅忽略 column-span: all 触发器。

CSS3 规范没有解决此行为的确切细节，因此我希望实现由浏览器(即设计和编写相关代码的人员)自行决定。

注意:我没有在 Safari 中检查这个，但我希望它能工作。