A floating box is a box that is shifted to the left or right from the current flow line.

By using the float property, content may be allowed to flow along the floated box side and similarly by using the clear property it may be prohibited from doing so.

A floated box is shifted to the edge of the containing block (left or right) and if there is not enough room for it, it must be shifted downwards. Such a box might be moved closer to the normal flow content with margin properties. On the other hand if the line box (normal flow content) is too small for the content then the line box will be shifted downward.

The rest of the normal flow boxes will be laid out as they would normally with the difference that the closest content created next to the floating box might get shortened to make room for the margin box of the float, making it appear as being wrapped around the float (floating box).

To have a line box appearing next to a float, following rules have to be satisfied: vertical position must be below the top edge and above the bottom edge of the line box; vertical position must be below the top margin edge and above the bottom margin edge of the float.

The margins of floating boxes are not collapsible.

Here are the examples of a common right float (left) and a wide left float which content has to be shifted below the float itself (right):

Float left imageFloat right image

 

 

 

 

Positioning a float

To position a floating box the float property is used.

The float property contains following information:

  1. value: left, right, none or inherit;
  2. initial: none;
  3. applies to: all elements except if display property is set to none and those elements that generate absolutely positioned boxes;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

As mentioned above the float property cannot be used if the elements is not being displayed (display:none) or the element generates boxes that are absolutely positioned.

The values left and right position the box to the left side and the right side of the content respectively. The content floats to the opposite side of the floated box. The value none cancels the floating effect.

To learn the rules that define a behavior of a floated element please read the article "floating elements behavior rules".

Controlling flow next to the floats

To control the flow of the boxes next to the floated elements the clear property is used.

The clear property contains following information:

  1. value: none, left, right, both or inherit;
  2. initial: none;
  3. applies to: block-level elements;
  4. inherited: no;
  5. percentages: N/A;
  6. media: visual;
  7. computed value: as specified.

This property indicates which sides of an element's box or boxes will not be affected by an earlier floated box.

The value left requires that the top border edge of the box stays below the bottom outer edge of any left floating boxes that are based on the earlier elements in the document tree. The value right on the other hand requires that the top border edge of the box stays bellow the bottom outer edge of any right floating boxes that are generated by an earlier element. At the end the value both combines the rules from values left and right. The value none applies no limits on the box's position with respect to the floats.

To learn how to calculate proper clearance please read the article "calculating clearance for floating elements".

Example

CSS floating elements example:

 

›› go to examples ››