blink渲染知识6 - floats

Posted by DaveHyatt onWednesday, August 15th, 2007 at 4:33 pm

A float is a renderer that is designed to shift all theway 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 objectavoiding it. You can see an example of a float in this veryparagraph. There is a purple box in the upper right hand corner. Notehow 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 canbe used to float an image.

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

A float can span multiple paragraphs. In this example, eventhough the float was declared inside this paragraph, it is tallenough that it will protrude out of this paragraph and into the nextone.

Because floats can effectively intersect multiple blocks, WebCoreuses a floating objects list on block flows to track all ofthe floating renderers that intrude into the bounds of that block. Asingle float can therefore be in the floating objects lists ofmultiple block flows. Line layout has to be aware of the positions offloats so that it can make sure to shrink lines as necessary to avoidthese floats. By having all of the relevant floats for a given blockimmediately accessible in this floating objects list, it becomes easyfor 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 {

            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 (atop, bottom, left and width). The reason each list entry has its ownposition and size that is independent of the floating object’sposition and size is that these coordinates are in the space of theblock that owns the floating objects list. This way each block caneasily query for the float’s position in its own coordinate spacewithout having to do a bunch of conversions.

In addition the margins of the float are included in the listentry rectangles, since lines don’t just avoid the border box ofthe float. They avoid the margin box of the float. This is importantso that floats can be padded with extra space to avoid having linesrun 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 usedto add and remove specific floats from a block’s floating objectslist. clearFloats will delete all of the objects in ablock’s floating objects list.

When an object gets inserted into the list it is unpositionedinitially. Its vertical position is set to -1. ThepositionNewFloats method is called by layout to placeall of the floats. CSS has abunch of rules for where floats are allowed to go. It is thismethod that ensures that all of those rules are obeyed.

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

Clearance

CSS

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

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

You can follow any responses to this entry through the RSS2.0 feed. Both comments and pings are currently closed.