【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之九：浮动(Float)定位细则二

[WebAdvocate]

本帖接 【分享】说说标准——CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)定位细则一

6. 浮动框的顶边不可以高于源文档中先前元素产生的块框或浮动框的顶
例子最直接了：

<style type="text/css">
    div {
       width: 100px;
       height: 100px;
       background-color: green;
       color: white;
       margin: 10px 0;
    }
</style>
<div style="width:180px; height:auto; overflow:hidden; background:white; border:1px solid gold;">
    <div style="float:left;">O</div>
    <div style="float:left; background-color: blue;">A</div>
    <div style="float:right; width:50px; background-color: red;">B</div>
</div>

O、A、B都是浮动元素，O、A是做浮动元素，根据宽度计算，A应该处于O的下一行。B是右浮动浮动元素。按照标准，B浮动的时候，顶边不应高于A，因此，B不会放到O的右侧显示
如图：

如果让A和B换个位置：

<style type="text/css">
    div {
       width: 100px;
       height: 100px;
       background-color: green;
       color: white;
       margin: 10px 0;
    }
</style>
<div style="width:180px; height:auto; overflow:hidden; background:white; border:1px solid gold;">
    <div style="float:left;">O</div>
           <div style="float:right; width:50px; background-color: red;">B</div>
    <div style="float:left; background-color: blue;">A</div>
</div>

这时候：

很神奇吧，别以为上面有位子浮动元素就会往上放。

7. 浮动框的顶边不可以高于源文档中先前元素产生的包含一个框的任何行框的顶。
在前面的内容中说到过，浮动元素会缩短行框。
关于行框，请参见：说说标准——CSS核心可视化格式模型(visual formatting model)之五：常规流中的inline formatting context。
例子:

<div style="width:400px; height:50px;border:1px solid red;">
    <div style="background-color:green; float:left; width:250px;">left</div>
    <span style="border:1px solid yellow;">blublublublublublublublublublublublu</span>
    <div style="background-color: green;float:right;">right</div>
</div>

截图：

依照标准来说，应该按照上图的方式放置 right 这个浮动元素。但是，只有Firefox/Chrome/Safari/Opera/IE8(S)是这样的，在IE6/IE7/IE8(Q)中，是这样的：

看来，这条规则，IE遵守的不好啊……
大家注意这个兼容性问题。

8. 左浮动框左边如果有另外一个左浮动框，它的右外边不可以出现在它包含块的右边之右。（或者比较宽松的要求是：一个左浮动不可以超出右边，除非它已经尽可能地靠左排列。）对于向右浮动的元素也有类似的规则。
此条规则也是限定浮动元素的位置范围，不可超出包含块。

9. 浮动框要放置得尽可能的高。
在符合所有规则的情况下，尽可能的向上放，注意6、7两条关于其顶边的规则。

10. 左浮动框必须尽量靠左放置，右浮动框必须尽量靠右放置。在更高的位置和更靠左或靠右的位置间，选择前者。
和第9条，可以算是浮动的大规则吧，尽量的向上向左/右放。

这几条规则中说到的其他元素，都和浮动元素处于相同的 block formatting context 中。

总结
可见，浮动的规则却是很让人迷惑，但从这几条规则中你也不难发现，浮动的宗旨是，在不溢出包含块的情况下，尽量的靠上靠左/右放置，但是不能高于它前面生成的块框、浮动框和行框的顶。

下帖预告：【分享】说说标准--CSS核心可视化格式模型(visual formatting model)之十：控制紧接浮动的排列：clear 特性

那将是另一个纠结的噩梦……

可视化格式模型概述：
http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196

更多说说标准系列：
【分享】说说标准系列目录

[rinoya111]

谢谢分享

• 打赏
• 举报

回复 赞

[alohau]

写的很详细，比市面上的书好多了！！

• 打赏
• 举报

回复 赞