CSS2.1SPEC：视觉格式化模型之width属性详解(下)

本文承接CSS2.1SPEC： 视觉格式化模型之width属性详解(上)，继续分析CSS视觉格式化模型中width以及相关值的计算问题：

注：与上节不同，本节的demo中由于出现了float,absolute等定位方式，因此为了便于效果显示，所有的demo都把body的margin属性设为10px，并且增加了一个class为container的div元素，它具有10px的padding，3px的border，500px的width，并通过设置float:left，_zoom:1来形成一个BFC从而清除浮动。

2.2.5 非置换的浮动元素

我们知道，元素在设置了float属性之后，就具有了“收缩性”，此时在计算width值的时候也有一个特殊的算法，首先看CSS标准中的计算规则：

首先，margin-left、margin-right的auto值将被设为0。

然后，元素的宽度则根据"shrink-to-fit"方法来计算，我们看一下"shrink-to-fit"算法的计算过程：

[1]计算preferred-width:在 除非包含的内容有明确的换行符(比如有<br/>标签时)，否则就不换行的情况下，容纳其包含的内容所需要的宽度。

[2]计算preferred-min-width:在 能换行时(英文碰到空格或标点符号，出现了块级元素，当然也包含出现了<br/>标签时)就换行的情况下，容纳所包含的内容需要的宽度。

[3]计算available-width:即利用2.2.3节中的公式：

available-width =width of containing block -  'margin-left' - 'border-left-width' - 'padding-left' - 'padding-right' - 'border-right-width' - 'margin-right，这里也包括所有滚动出去的宽度。

最终的width则为：min(preferred-width, max(preferred-min-width, available-width))。最终的公式可以总结为：最终的宽度以available-width为基准，同时保证不能大于preferred-width以及不能小于preferred-min-width

available-width应该还比较容易理解，但是preferred-width和preferred-min-width相对不好理解一下，我们通过DEMO来分析一下：

##DEMO 1 shrink-to-fit算法示例一

我们有如下代码：

<div class="container">
<div style="float: left;border: 1px solid #f00;">
        dddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>

我们知道，英文在不出现空格的情况下是不允许换行的，而且这里的这个“单词”长度肯定超出了500px的长度，我们看一下效果：

分别标记一下各个宽度：

注：这个demo在IE6中的显示效果会有些不同，因为IE6下及时定义了框的width属性，但是还是有可能会被内容撑开，这个问题本文后面会进行介绍

由于英文单词不允许换行，所以在这里，preferred-min-width和preferred-width都是相同的，也就是说，这个"单词"有多长，那么这两个宽度值也是多少，在这里是756px(还有左右各1px的边框)，而available-width很明显就是包含块的宽度了，这里是500px，带入shrink-to-fit的公式中计算即可得到最终的width值为756px。

##DEMO 2 shrink-to-fit算法示例二

我们对DEMO1中的代码进行下改动，也就是把DEMO1中的"单词"加几个空格：

<div class="container">
<div style="float: left;border: 1px solid #f00;">
        ddddddddddddddddddd dddddddddddd ddddddddddd dddddddddddddddddddddddddddddddddddddddddddddd
</div>
</div>

这样一来，就变成了一句英文句子了，并且在空白处时候允许换行，我们看最终的显示效果：

标记一下各个宽度：

把这个几个值带入公式计算，也不难得出最终的宽度值就是available-width，即500px

2.2.6 浮动置换元素

首先， margin-left、margin-right的auto值将被设为0。

而width属性的计算则与行内置换元素的计算方法相同，可参照2.2.2节中的介绍。