CSS Layout - float and clear

Float of CSS will move the element to the left or right, and the surrounding elements will be rearranged.

Float (float) is often used for images, but it is also very useful when laying out.

How elements float

The horizontal floating of the element means that the element can only move left and right, but not up and down.

A floating element moves as far as possible left or right until its outer edge touches the border of the containing box or another floating box.

The element after the floating element will surround it.

Elements before the floating element will not be affected.

If the image is floating to the right, the following text stream will wrap to the left:


img { float:right; }
Try it yourself »

Clear floating-use clear

After the element floats, the surrounding elements are rearranged. To avoid this, use the clear attribute.


clear attribute specifies that floating elements cannot appear on either side of the element.

Use the clear attribute to add an image gallery to the text:


.text_line { clear:both; }
Try it yourself »

Floating elements next to each other

If you put several floating elements together, they will be next to each other if there is space.

Here we use the float attribute for the image gallery:


.thumbnail { float:left; width:110px; height:90px; margin:5px; }
Try it yourself »