WebCore Rendering V – Floats

转载 2011年01月11日 13:56:00

WebCore Rendering V – Floats

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

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.

Here is how the purple float above was declared:

<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, the align attribute on the img element can be used to float an 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.

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.

A floating objects list contains the following data structure:

    struct FloatingObject {
        enum Type {

        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.

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.

The following methods operate on the floating objects 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.

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

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.


CSS provides a way for objects to specify that they should be below either all left floats, all right floats, or all floats. The clear property specifies this behavior and has values ofnoneleftright or 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).

WebCore Rendering V - Floats

原文:http://www.webkit.org/blog/118/webcore-rendering-v-floats/ 译文: float是一个renderer可以使得对象全部放置在段落的...

WebCore Rendering II – Blocks and Inlines

WebCore Rendering II – Blocks and Inlines

WebCore Rendering I – The Basics

WebCore Rendering I – The Basics Posted by Dave Hyatt on Wednesday, August 8th, 2007 at 5:34 pm ...

WebCore Rendering III – Layout Basics

原文:http://www.webkit.org/blog/116/webcore-rendering-iii-layout-basics/ 译文: 当renderer被首次创建并加入到树中时,他...

WebCore Rendering IV – Absolute/Fixed and Relative Positioning

WebCore Rendering IV – Absolute/Fixed and Relative Positioning

WebCore Rendering 2 - 块和内联

在上一篇文章中,我们讲到了CSS盒模型的基本结构。在本文中,我们将继续讨论RenderBox类(继承于RenderObject类),以及关于块(block)和内联(inline)的概念。      ...

WebCore Rendering II -- Blocks and Inlines

原文链接:http://www.webkit.org/blog/115/webcore-rendering-ii-blocks-and-inlines/ 译文:  Posted by Dave H...

WebCore Rendering 4 - 绝对/固定定位和相对定位

CSS里的position属性可以用来对一个对象相对于某个容器块(containing block)进行相对定位。该属性有4个值:'static'(静态), 'absolute'(绝对), 'fixe...

WebCore Rendering 1 - 基础

DOM树(The DOM Tree)         网页的HTML源代码会被解析成一棵名叫文档对象模型(Document Object Mode,DOM)的,由各个节点组成的树。树节点的基类为No...

WebCore Rendering I --- the basic

原文:http://www.webkit.org/blog/114/webcore-rendering-i-the-basics/ 一下是翻译版本,后面还有对照版本。  这是一系列文章中的第一篇,...
您举报文章:WebCore Rendering V – Floats