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可以使得对象全部放置在段落的...
  • bertzhang
  • bertzhang
  • 2011年09月01日 15:18
  • 834

WebCore Rendering

  • liumf2005
  • liumf2005
  • 2013年03月22日 13:50
  • 412

WebCore Rendering I --- the basic

原文:http://www.webkit.org/blog/114/webcore-rendering-i-the-basics/ 一下是翻译版本,后面还有对照版本。  这是一系列文章中的第一篇,...
  • bertzhang
  • bertzhang
  • 2011年08月30日 13:39
  • 1487

Exception raised during rendering: java.lang.System.arraycopy([CI[CII)V

错误原因:API等级 API 20:Android 4.4w,这是Android官网发布的可穿戴设备的API,它是不支持EditText组件的...
  • ituff
  • ituff
  • 2014年08月28日 12:31
  • 18462

WebCore Rendering I – The Basics

WebCore Rendering I – The Basics
  • Max__Payne
  • Max__Payne
  • 2011年01月11日 13:53
  • 415

WebCore Rendering 5 - 浮动

  • jordanxinwang
  • jordanxinwang
  • 2012年09月09日 15:52
  • 527

WebCore Rendering 1 - 基础

DOM树(The DOM Tree)         网页的HTML源代码会被解析成一棵名叫文档对象模型(Document Object Mode,DOM)的,由各个节点组成的树。树节点的基类为No...
  • jordanxinwang
  • jordanxinwang
  • 2012年05月27日 16:48
  • 457

WebCore Rendering 3 - 排版基础

当渲染树节点首次创建并加入到渲染树时,它还没有任何位置和大小信息。计算各个盒(Box)的位置和大小的过程即为排版(layout)。每一个渲染树对象都有一个排版方法。 void layout() 排...
  • jordanxinwang
  • jordanxinwang
  • 2012年08月26日 15:49
  • 571

WebCore Rendering III – Layout Basics

WebCore Rendering III – Layout Basics
  • Max__Payne
  • Max__Payne
  • 2011年01月11日 13:54
  • 508


错误信息如下: Exception raised during rendering: Java.lang.System.arraycopy([CI[CII)V Exception details...
  • JQ_AK47
  • JQ_AK47
  • 2016年07月13日 15:54
  • 976
您举报文章:WebCore Rendering V – Floats