您的位置：首页 > Web前端 > CSS

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

2010-08-11 17:09 676 查看

浮动是可视化格式模型中非常重要的一节。浮动跟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 排列的。

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

浮动元素会缩短行框

由于浮动框并不在常规流
中，在该浮动框之前或之后创建的非定位框垂直排列，就好象浮动框并不存在一样。然而，浮动框之后创建的行框
会被缩短，比便为浮动元素的 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>

这时，B的宽度为50px，它和浮动元素A的包含块都是C，宽度为200px。浮动元素在放置后，还有足够的空间放置B，所以，B 被紧挨着A 的margin 框被放置。如截图：

将B的宽度改为150px，这时：

需要注意的时，这种方式与使用 clear 特性清除浮动不同。后面将介绍 clear 特性。

续……

以上是关于浮动定位和内容排列的简介，决定浮动行为的确切规则在下一篇中介绍 'float' 属性的描述中给出。其中介绍了，在具体的情况下，浮动元素是怎样被定位的。比如，浮动框的顶边不可以高于源文档中先前元素产生的块或浮动框的顶等。

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

下一帖预告：
【分享】说说标准--CSS核心可视化格式模型(visual formatting model)之八：float 特性以及浮动(Float)的具体规则

可视化格式模型概述：

http://topic.csdn.net/u/20100719/17/ff203b89-135e-46cf-8fce-705f16e37beb.html?006156676166584196

更多说说标准系列：

【分享】说说标准系列目录

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航