WebCore Rendering 5 - 浮动

最新推荐文章于 2024-10-17 23:22:01 发布

jordanxinwang

最新推荐文章于 2024-10-17 23:22:01 发布

阅读量665

点赞数

分类专栏： WebKit 文章标签：数据结构 float css 引擎 html

WebKit 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

“浮动（Float）”指的是渲染树节点被移至段落的左边或段落的右边。段落的内容就环绕在浮动对象的周围。你可以看到，本段落就是一个浮动的例子。在段落的右上角有一个紫色的盒子。注意，段落中的文字是如何环绕和避开这个浮动对象的。

下面是对上面这个浮动的紫色盒子的描述：

有一些HTML语法同样表示了这个CSS浮动形为。例如：img元素的align属性可以被用来浮动一个图片对象。

浮动可以跨越多个段落。在这个例子里，虽然浮动是声明在这个段落里的，但是这个浮动元素足够的长，从而从这个段落跨越到下一个段落。

因为浮动对象可以有效的跨越多个块，WebCore在块流（block flows）上使用一个浮动对象列表（a floating objects list）来记录所有的跨越到该块的浮动渲染树节点。因此，一个浮动对象可以存在于多个块流的浮动对象列表里。行排版（Line layout）需要注意浮动对象的位置，从而，行排版可以对行进行相应的收缩以保证不与这些浮动对象相交。对于块，所有与其相关的浮动对象都可以方便地通过块的浮动对象列表查询出来，因此，块可以清楚地知道不要与哪些浮动对象相交。

浮动对象列表包含的数据结构如下：

struct FloatingObject {

enum Type {

FloatLeft,

FloatRight

};

FloatingObject(Type type)

: node(0)

, startY(0)

, endY(0)

, left(0)

, width(0)

, m_type(type)

, noPaint(false)

{

}

Type type() { return static_cast<type>(m_type); }

RenderObject* node;

int startY;

int endY;

int left;

int width;

unsigned m_type : 1; // Type (left or right aligned)

bool noPaint : 1;

};

可以看到，这个结构有效地包含了一个矩形（a top, bottom, left以及width）。每一个列表项都有它自己的位置和大小（该位置和大小是独立于浮动对象的位置和大小）的原因是这些坐标是在拥有这个浮动对象列表的块的空间里的。在这种方式下，每一个块都可以简单地查询到浮动元素在其坐标空间下的位置，而不需要进行一堆转换后才得到。

此外，浮动元素的边距（margin）是包括在浮动对象列表项的矩形里的，因为，行不只是仅仅避开浮动对象的边框盒（border box），而是避开浮动对象的边距盒（margin box）。这一点是重要的，这就使得通过对浮动对象额外的填充，就可以避免行会与浮动对象紧贴的情况。

下面是一些对浮动对象列表操作的方法：

void insertFloatingObject(RenderObject*);

void removeFloatingObject(RenderObject*);

void clearFloats();

void positionNewFloats();

前面两个函数从其函数名就可以知道其用途了。它们用于从块的浮动对象列表中增加或移除某个浮动对象。clearFloats将清空块的浮动对象列表。

当一个对象被插入到列表中时，它还没有位置信息。它的垂直位置为-1。positionNewFloats方法会被排版引擎调用，以放置这些浮动对象。CSS有许多关于浮动对象应该如何放置的规则。这个方法会应用和满足这些规则。

还有许多对操作浮动对象更有帮助的方法。我会在将来讲述块排版和行排版的文章中提及这些方法。

清除（Clearance）

CSS提供一种方式，使对象会位于向左浮动的对象，或向右浮动的对象，或全部浮动的对象的下方。Clear属性就是用于该目的的，它拥有的值为：none, left, right或both。