CSS - Float

The CSS float property.

Float is generally very useful to build templates and image galleries, but it can also be used in other places.

Using the float attribute, the elements will float next to each other, as long as the container width allows it.

Here we have a practical example We want to build an image gallery and we want all thumbs to be displayed in rows and columns. float: left; will show images on one line as long as the page width allows it and will start a new line when the next image doesn't have enough space to fit inside the row.

Here is another practical example: We have an image left or right aligned, and we want if to be sorrowed with text. float:left; or float:right; will allow the text to slip around the image.

CSSimg { float:left; }

/* or */

.elements_class{ float:left; }

CSS - Breaking the line, the clear attribute

All HTML elements that comes next to elements aligned using float left or right, will float next to it. To prevent that you need to use the clear attribute with the value: both:

CSS.break_float { clear:both; }