我正在为我的博客开发的新主题中使用流畅的布局。我经常写关于代码的博客，并<pre>在帖子中包含块。内容区域的float: left列有一个max-width，以便该列在某个最大宽度处停止，也可以缩小：
+----------+ +------+
| 正文 | | 正文 |
| | | |
| | | |
| | | |
| | | |
| | | |
+----------+ +------+
最大缩小
我想要的是<pre>元素比文本列更宽，这样我就可以在没有水平滚动条的情况下容纳 80 个字符的包装代码。但我希望<pre>元素从内容区域溢出，而不影响其流动性：
+----------+ +------+
| 正文 | | 正文 |
| | | |
+---------+--+ +------+------+
| 代码 | | 代码 |
+---------+--+ +------+------+
| | | |
+----------+ +------+
最大缩小
但是，max-width一旦我将悬垂插入其中，就会停止流动：即使我将浏览器缩小到超出该宽度<pre>，列的宽度仍保持在指定值。max-width
我已经用这个最低限度的场景重现了这个问题：
<div style="float: left; max-width: 460px; border: 1px solid red">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
<pre style="max-width: 700px; border: 1px solid blue">
function foo() {
// Lorem ipsum dolor sit amet, consectetur adipisicing elit
}
</pre>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
我注意到执行以下任一操作都会恢复流动性：
- 删除
<pre>(doh...) - 去除那个
float: left
我目前使用的解决方法是将<pre>元素插入到帖子列中的“中断”中，以便帖子段和<pre>段的宽度相互独占管理：
+----------+ +------+
| 正文 | | 正文 |
+----------+ +------+
+-------------+ +-------------+
| 代码 | | 代码 |
+-------------+ +-------------+
+----------+ +------+
+----------+ +------+
最大缩小
但这迫使我<div>在帖子标记中插入额外的关闭和打开元素，我宁愿在语义上保持原始状态。
诚然，我没有完全理解盒子模型如何与内容溢出的浮动一起工作，所以我不明白为什么float: left容器上和容器<pre>内部的组合会削弱max-width容器的性能。
我在 Firefox/Chrome/Safari/Opera 上观察到同样的问题。IE6（疯狂的）似乎一直都很开心。
这似乎也不依赖于怪癖/标准模式。
更新
我已经进行了进一步的测试以观察max-width当元素具有float: left. 我浏览了 W3C 盒子模型章节，但没有立即看到明确提及这种行为。任何指针？