【分享】说说标准--CSS核心可视化格式模型(visual formatting model)之七：浮动(Float)概述

WebAdvocate 2010-08-11 04:53:59

加精

浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型，并不是二维的。元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表示。但是，元素和元素之间的位置如果有所重叠，谁显示在前面，就涉及到另一个轴：z轴。我们经常使用的 z-index 就是如此得来的。浮动框在整个模型中，z轴坐标比常规流中的值要高，所以会飘在它上面。也可以把这个模型看作是 Photoshop中的图层，我们就好像在好多层玻璃上画框框，这些玻璃都叠在一起，我们只能透过一个窗口(浏览器可见窗口)来看这些玻璃重叠后的图画。浮动可以看作其中的一个图层。

浮动和文字环绕
浮动框就是一个框在当前行被向左或向右挪动(偏移)，它不在常规流中，浮动框由浮动元素的框组成。浮动框( float, “floated” or “floating” box)最有趣的特性是内容可以沿着它的边缘渲染（或设置'clear'属性禁止此特性）。内容排列在沿着左浮动框的右边排列，而沿着右浮动框的左边排列，也就是我们常说的文字环绕效果。
请看下面的例子：

<!DOCTYPE HTML>

<HTML>

<HEAD>

    <TITLE>Float example</TITLE>

    <STYLE type="text/css">

       span {

           float: left

       }

       P {

           margin: 2em;

           border: 1px solid red;

           width: 200px;

       }

    </STYLE>

</HEAD>

<BODY>

<P>

    <span style="width:100px; height:100px; background-color:green; margin:20px;"></span>

    The IMG box is floated to the left. The content that follows is formatted to the

    right of the float, starting on the same line as the float.

</p>

</BODY>

</HTML>

其中，P中包含浮动的SPAN和一些文字，浏览器运行截图：

如上图，文字和绿色的块之间有空白，可见，文字是围绕绿块的 margin 排列的。

浮动框的放置

一个浮动框，会被向左或向右偏移，直到它的外边界( outter edge，又叫margin edge ) 接触到它包含块的边界或另一个浮动元素的外边界( outter edge，又叫margin edge ) ，如果存在一个行框，浮动框的顶边会和当前行框的顶部对齐。

如果水平方向没有足够的空间放置浮动元素，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。

浮动元素会缩短行框
由于浮动框并不在常规流中，在该浮动框之前或之后创建的非定位框垂直排列，就好象浮动框并不存在一样。然而，浮动框之后创建的行框会被缩短，比便为浮动元素的 margin 框提供空间。如果被缩短的行框无法再容纳更多的内容，它将向下移动，直到有足够的空间或没有更多的浮动元素为止。当前行里浮动框前的任何内容，都将被重新排列到该浮动另一侧的第一个可用行里。也就是说，如果在遇到左浮动框之前，行内框被放置到行上，剩余的行框空间足够容纳该左浮动框，那么，左浮动框就会被放置在该行上，并与该行框的顶端对齐，然后，已经在行上的行内框被相应地移动到该浮动框的右侧（右侧成了该左浮动框的另一侧），反之亦然，对于 rtl 和右浮动框也是一样。
如上图中的文字环绕的例子，包含文字的行框被缩短，是包含块减去浮动元素的 margin 宽度。其中，The content两字，分别被放到了两行，因为，一行中的剩余空间无法再容纳content。

TABLE 元素、块级替换元素、BFC元素和浮动元素
TABLE 元素、块级替换元素或者在常规流中创建了 block formatting contexts 的元素，它们的 border box 在同一个 block formatting contexts 中，一定不能覆盖任何浮动元素。如果有必要，实现工具应该通过把元素放置到前面浮动元素的下面，以清理先前说到的元素，但是，如果有足够的空间，也可以把它紧临浮动元素放置。它们可能造成所说元素的 border box 比10.3.3中定义的要短。

<!DOCTYPE HTML>

<HTML>

<HEAD>

    <TITLE>Float example</TITLE>

    <STYLE type="text/css">

       #C {

           margin: 2em;

           border: 1px solid red;

           width: 200px;

           overflow: hidden;

       }

    </STYLE>

</HEAD>

<BODY>

<div id="C">

    <div id="A" style="width:50px; height:50px; background-color:green; margin:20px; float: left;">A</div>

    <div id="B" style=" width:50px; background-color:blue; overflow:hidden;">B</div>

</div>

</BODY>

</HTML>