Floats: Introduction

We show some very simple floats. A float simulates the placing of an image in text. Typically an image which accompanies a text is placed against either the left or right margin and the text then flows around it. So a float is a box taken out of the so called normal flow of typesetting. It is moved left or right, so that the float's outer edge contacts the containing box's inner edge.

The containing box itself, its background and borders, are not changed by the float. However, content in a normal box flows around float boxes. This is the correct thing for the purpose of images in text.

The float moves directly left or right, not up or down. The float is also constrained not to go past the top inner edge of the containing box. It might also float down, if there isn't enough room at the current page position. We first investigate what inner and outer edge means, to understand float placement. Here is a blue box, in normal mode.

I now add a float with a red background inside. There is no padding or margin.

The float is added as text immediate at the beginning of the text in the blue box. It is therefore placed as high as possible, with its top edge contacting the inner top edge of the blue containing block. The float's left outer edge is brought in contect with the containing box's inner edge.

If I add padding to the blue box, note the effect.

The effect is that the text in the blue box moves away from the edge of the blue box, and so does the float.

I now add 5 pixels of margin to the red float.

Note how the margin is transparent, the red float is moved away from the border of the red region, and the blue shows through.

I now add 5 pixels of padding to the red float.

Note how the content is now inset into the red region. However the red float's position did not change.

Conclusion: The outer edge of the float is the edge of its margin. The inner edge of the containing box is the edge of its padding.

(c) 2007 Burton Rosenberg. All rights reserved.