WebCore Rendering V - Floats

  

原文：http://www.webkit.org/blog/118/webcore-rendering-v-floats/

译文：

float是一个renderer可以使得对象全部放置在段落的左边或者右边，段落中的lines排版在floating对象的旁边，正如你所看到的本段落就是一个很好的例子，在右上角有一个紫色的box，可以注意到段落中的text是如何相对于float来layout的。

下面是紫色的float box如何被声明的：

<div style="float:right; width:50px; height:50px; background-color:purple; margin-left: 5px"></div>

HTML也有方法可以实现CSS的floating行为，举例来说，img元素的align属性可以用来float一个image。

<img align=left src="...">

一个float可以跨越多个段落，在这个例子中，尽管float被声明在这个段落中，但他足够高，突出到下一个段落但中。

因为float与多个block相交，对于一个block flow WebCore使用一个floating objects list来跟踪全部的进入该block边界的floating renderers。因此一个float 可能出现在多个block flow的list当中。line layout时需要知道float的位置，以便line收缩足够的lines以避开float。 一个block通过floating objects list可以快速的访问与其相关的floats，使得该block可以容易的知道他需要avoid的float在哪里。

 

 

floating objects list包含下面的数据结构：

    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;
    };

正如你所看见的，这个数据结构有效的存储了一个方形（top，bottom，left 和 width）。每一个节点都有自己的位置和size的原因是：一个block的floating objects list中的float的位置和size都是相对于该block来确定的，这样每一个block可以容易的在自己的坐标系内访问他的float位置，从而避免也一堆的转换工作。

而且，margins被作为方形的一部分计算，因为lines不仅avoid box的border，他们也avoid box的margin。因此这么做是重要的，使得line可以avoid包括margin在内的一些额外空间。

下面的这些方法来操作floating object list：

void insertFloatingObject(RenderObject*);
void removeFloatingObject(RenderObject*);
void clearFloats();
void positionNewFloats();

前两个方法的作用是不言而喻的，他们用于添加和删除某个特定的floats，clearFloats将清除全部的floats

当一个对象刚刚插入到list当中时，他的位置信息是没有的，他的垂直位置被设置为-1，layout调用方法positionNewFloats用来计算所有的floats。CSS中对于float有一堆的规则，这个方法保证这些规则被遵守。

有很多方法可以帮助和float一起工作，我将cover这些，当我在未来的文章中讨论工作block和line的layout。

Clearance

CSS为对象提供了一种方法使得他们可以排在所有left float、所有right float或者全部float之下，clear属性指定了这种行为，他有：none，left，right和both四个值。

 

这个段落就是因为使用了clear属性而出现在蓝色的float之下的，clearn行为是在block和line layout时计算和应用的。clear属性也可以用于与float，表示一个float在其他的以往的float之下。（也包括left，right，both类型的float）。

 

-----------------------------------------------------------------中英文对照---------------------------------------------------------

Posted by Dave Hyatt on Wednesday, August 15th, 2007 at 4:33 pm

A float is a renderer that is designed to shift all the way to the left side or all the way to the right side of a paragraph. The lines of the paragraph then flow around the floating object avoiding it. You can see an example of a float in this very paragraph. There is a purple box in the upper right hand corner. Note how all of the text in this paragraph is avoiding the float.

float是一个renderer可以使得对象全部放置在段落的左边或者右边，段落中的lines排版在floating对象的旁边，正如你所看到的本段落就是一个很好的例子，在右上角有一个紫色的box，可以注意到段落中的text是如何相对于float来layout的。

Here is how the purple float above was declared:

下面是紫色的float box如何被声明的：

<div style="float:right; width:50px; height:50px; background-color:purple; margin-left: 5px"></div>

There are also HTML constructs that imply CSS floating behavior. For example, thealign attribute on theimg element can be used to float an image.

HTML也有方法可以实现CSS的floating行为，举例来说，img元素的align属性可以用来float一个image。

<img align=left src="...">

A float can span multiple paragraphs. In this example, even though the float was declared inside this paragraph, it is tall enough that it will protrude out of this paragraph and into the next one.

一个float可以跨越多个段落，在这个例子中，尽管float被声明在这个段落中，但他足够高，突出到下一个段落但中。

Because floats can effectively intersect multiple blocks, WebCore uses a floating objects list on block flows to track all of the floating renderers that intrude into the bounds of that block. A single float can therefore be in the floating objects lists of multiple block flows. Line layout has to be aware of the positions of floats so that it can make sure to shrink lines as necessary to avoid these floats. By having all of the relevant floats for a given block immediately accessible in this floating objects list, it becomes easy for that block to know where the floats are that it needs to avoid.

因为float与多个block相交，对于一个block flow WebCore使用一个floating objects list来跟踪全部的进入该block边界的floating renderers。因此一个float 可能出现在多个block flow的list当中。line layout时需要知道float的位置，以便line收缩足够的lines以避开float。 一个block通过floating objects list可以快速的访问与其相关的floats，使得该block可以容易的知道他需要avoid的float在哪里。

 

A floating objects list contains the following data structure:

floating objects list包含下面的数据结构：

    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;
    };

As you can see, this structure effectively contains a rectangle (a top, bottom, left and width). The reason each list entry has its own position and size that is independent of the floating object’s position and size is that these coordinates are in the space of the block that owns the floating objects list. This way each block can easily query for the float’s position in its own coordinate space without having to do a bunch of conversions.

正如你所看见的，这个数据结构有效的存储了一个方形（top，bottom，left 和 width）。每一个节点都有自己的位置和size的原因是：一个block的floating objects list中的float的位置和size都是相对于该block来确定的，这样每一个block可以容易的在自己的坐标系内访问他的float位置，从而避免也一堆的转换工作。

In addition the margins of the float are included in the list entry rectangles, since lines don’t just avoid the border box of the float. They avoid the margin box of the float. This is important so that floats can be padded with extra space to avoid having lines run right up to their edges.

而且，margins被作为方形的一部分计算，因为lines不仅avoid box的border，他们也avoid box的margin。因此这么做是重要的，使得line可以avoid包括margin在内的一些额外空间。

The following methods operate on the floating objects list:

下面的这些方法来操作floating object list：

 void insertFloatingObject(RenderObject*);
void removeFloatingObject(RenderObject*);
void clearFloats();
void positionNewFloats();

The first two functions are pretty self-explanatory. They are used to add and remove specific floats from a block’s floating objects list.clearFloats will delete all of the objects in a block’s floating objects list.

前两个方法的作用是不言而喻的，他们用于添加和删除某个特定的floats，clearFloats将清除全部的floats

When an object gets inserted into the list it is unpositioned initially. Its vertical position is set to-1. ThepositionNewFloats method is called by layout to place all of the floats. CSS hasa bunch of rules for where floats are allowed to go. It is this method that ensures that all of those rules are obeyed.

当一个对象刚刚插入到list当中时，他的位置信息是没有的，他的垂直位置被设置为-1，layout调用方法positionNewFloats用来计算所有的floats。CSS中对于float有一堆的规则，这个方法保证这些规则被遵守。

There are many more helper methods for working with floats. I will cover these when I talk about block and line layout in more detail in future articles.

有很多方法可以帮助和float一起工作，我将cover这些，当我在未来的文章中讨论工作block和line的layout。

Clearance

CSS provides a way for objects to specify that they should be below either all left floats, all right floats, or all floats. Theclear property specifies this behavior and has values of none, left, right or both.

 CSS为对象提供了一种方法使得他们可以排在所有left float、所有right float或者全部float之下，clear属性指定了这种行为，他有：none，left，right和both四个值。

This paragraph is below the blue float from the previous paragraph because it specified clear: left. Clearance is computed and applied during block and line layout. The clear property can also be applied to floats to make sure that a float ends up below all previous floats (again, either left, right or both types of floats).

这个段落就是因为使用了clear属性而出现在蓝色的float之下的，clearn行为是在block和line layout时计算和应用的。clear属性也可以用于与float，表示一个float在其他的以往的float之下。（也包括left，right，both类型的float）。