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

[WebAdvocate]

浮动特性非常有用，3大布局核心之一。虽然如此，它涉及内容过多，浏览器兼容性问题也很多。它的定位不仅涉及 包含块，还涉及到了行框，块框，还有行内框等内容；并且，各浏览器对其的支持还有不少兼容性问题。因此，它既是美梦又是噩梦。
那么，浮动产生的困惑缘何而生，又由何而灭呢？一切都由W3C标准来定夺吧……

float 特性
'float'


适用于哪些元素
可设置给任意元素，但只适用于生成非绝对定位框的元素。
例：

<div style="width:500px; height:150px; border:1px solid green; position:relative;">
    <div style="width:100px; height:100px; float:right; position:absolute; border:1px solid red;">absolute</div>
    <div style="width:100px; height:100px; float:right; position:relative; border:1px solid red;">relative</div>
</div>

截图：

可见，对于绝对定位的元素，浮动没有任何效果。这也体现了浮动和绝对定位之间的一种平衡。
而且，用Firefox的Firebug查看，你会发现，对于绝对定位元素计算后的 “float” 值，是”none”，而不是”right”。Chrome中则是 right……

特值的含义
该属性指定框应当向左右移动或者不移动。特性值有如下含义：
left
该元素产生一个向左浮动的块框。内容在该框的右边排列，就是上一篇帖子中所说的文字环绕，起点是框的顶部（会受'clear'属性的影响）。
right
与left类似，框向右侧浮动，内容在该框的左侧排列，从顶部开始。
none
该框不浮动。

这个大家应该都比较清楚吧，不再浪费篇章举例了。

浮动细则

1. 对于根元素的浮动，浏览器应该当作 none
根元素无所谓是否浮动，没有实际意义。

2. 左浮动框的左外边界(margin edge)不可以出现在它包含块左边界之左。对于右浮动的元素也有类似规则
以上的话，看起来有点绕眼……
是这么个意思，左浮动元素的左 margin 最多紧贴包含块的左边界。注意，是margin edge，不是border edge也不是content edge。关于边界 (edge) 见：说说标准——你真的了解盒子模型(box model)吗？

<style type="text/css">
    .sub {
       width: 100px;
       height: 100px;
       background-color: green;
       margin:0 20px;
    }
</style>
<div style="width:500px; border:2px solid red; overflow:hidden;">
    <div class="sub" style="float:left;">left</div>
    <div class="sub" style="float:right;">right</div>
</div>

示意图：


3. 如果当前框是左浮动框，并且在源文档中存在更早生成的左浮动框，那么对于任意这些先前的框，要么当前框的左外边出现在先前框的右外边之右，要么它的顶部必须在先前框的底部之下。对于向右浮动的框也有类似的规则。
也就是说，浮动元素的定位受先前生成的浮动框的影响。后面的浮动元素，需要紧挨着先前同向浮动元素的 margin 边进行定位，如果空间不足，则折行，放置到它之前元素的下面。
例如：

<style type="text/css">
    .sub {
       width: 200px;
       height: 100px;
       background-color: green;
       margin:10px;
    }
</style>
<div style="width:500px; border:2px solid red; overflow:hidden;">
    <div class="sub" style="float:left;">left1</div>
    <div class="sub" style="float:left;">left2</div>
    <div class="sub" style="float:left;">left3</div>
</div>

截图：

如上图中，把left2当作当前元素，那么，它前面有left1生成的浮动框，所以，它会贴着left1的右 margin 边排列。而到left3 的时候，剩余的空间已经不能够放置它了，所以，折行放置。

4. 左浮动框的右外边不可以出现在它右侧的任何右浮动框的左外边之右。对于向右浮动的元素也有类似的规则。

注意，以上说的是右侧，不是下侧，此规则不包括左浮动框下面的右浮动框。就是说，同一行中的左浮动元素和有浮动元素不能够有互相折叠的现象。

<style type="text/css">
    .sub {
        width: 100px;
        height: 100px;
        background-color: green;
        margin: 10px;
    }
</style>
<div id="container" style="width:200px; overflow:hidden; border:1px solid red;">
    <div class="sub" style="float:left;">left</div>
    <div class="sub" style="float:right;">right</div>
</div>

以上两个浮动元素的包含块宽度为200px，无法在一行放置，所以，右浮动元素只好折行显示了。
宽度设置成300px之后，则可以放到一行。



5. 浮动框的顶外边不能高于它包含块的顶部。当一个浮动框发生在两个margin折叠的中间时，浮动元素的定位好像它有另一个空的块级父框位于常规流中。那个空父框的定位规则在margin 折叠一节有说明。

第一句好理解，说的是顶边不能超出包含块，跟左边右边不能超出一个道理。
后面的规则是说，当浮动框处于两个发生margin折叠的地方时，会被当作被包含在一个空的块框中，它上面和下面的margin会穿过它发生margin折叠，当它不存在。

<style type="text/css">
    div {
       width: 100px;
       height: 100px;
       background-color: green;
       color: white;
       margin: 50px;
    }
</style>
<div>A</div>
<div style="float:left; margin:10px; background-color: red;">O</div>
<div>B</div>

以上代码中，3个 div 的包含块是初始包含块。O 处于 A 和 B 的中间，A和B在理论上应当发生margin 折叠。那么，发生了么？
看截图：

依此图看，确实是没问题的……
但是，IE中是这样么，各位看官可以自行查看，保你大吃一斤。哈哈！

今天就到这里吧，太多记不住……

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

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

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

[kaifadi]

第4条,注意，以上说的是右侧，不是下侧，此规则不包括左浮动框下面的右浮动框。就是说，同一行中的左浮动元素和有浮动元素不能够有互相折叠的现象。这个很好理解，不再举例。

其他都理解了，就这个是何意思，能举个例吗？谢了！

• 打赏
• 举报

回复 赞

[WebAdvocate]

[Quote=引用 2 楼 falizixun2 的回复:]

第4条,注意，以上说的是右侧，不是下侧，此规则不包括左浮动框下面的右浮动框。就是说，同一行中的左浮动元素和有浮动元素不能够有互相折叠的现象。这个很好理解，不再举例。

其他都理解了，就这个是何意思，能举个例吗？谢了！
[/Quote]第四则更新了一下……

• 打赏
• 举报

回复 赞

[tizll521]

学习了 好久没看你的文章了 今天得把你新更新的读完 每次读你的新文章都能有所感悟
继续努力 UP

• 打赏
• 举报

回复 赞

[alohau]

恩，很好。
浮动向来是布局的一大问题，以前对它的理解也都是一些书上零星的认识。
没想到，还有这么细节的东西。
多谢楼主了！

• 打赏
• 举报

回复 赞