Float

If we wish to place more than one element on a line, we can use the float property (float), which allows an element to float left or right, but not up or down. Values for the property include left and right as well as the default value none. Floating paragraphs of fixed width will result in their filling a line from left to right, and if there are paragraphs left over, the same process occurring for the remainder on the next line.

image of float and wrap

Paragraphs floating to the left

If an element that floats is contained within another element, it floats to the end of the containing element. Setting the width of a floated element is required (except for images).

One of the most common uses of the float property is to allow text to flow around an image. In this case, the float property is applied only to the image, not the paragraphs. In these examples, the image comes after the first paragraph in normal flow. Notice that the following paragraphs wrap around the image are ones that follow it in the document.

image without float

Image without float


image with float left

Left float
Images: Ivor Traber

image with float right

Right float


Rules for floats

  • Elements that come before the floated element are not changed.
  • Elements that come after the floated element flow around it.