CSS Float (floating)

What is CSS Float (float)?

The CSS Float (floating), the element will move left or right, the elements around it will be rearranged.

Float (floating), is often used for images, but it is very useful when the same layout.

How floating element

Horizontal floating element, means that the element can only move left and right and can not move up and down.

A floating element will try to move left or right until its outer edge across the border or another floating box containing box so far.

Elements after the floating element will focus on it.

Elements before the floating element will not be affected.

If the image is floating right, the following text will flow around the left side of it:

Floating elements adjacent to each other

If you put a few floating elements put together, if there is room, it will be adjacent to each other.

Here, we use the float property picture gallery:

Clear float - Use clear

After the elements floating around elements rearranged, in order to avoid this, use the clear property.

clear attribute specifies the element can not appear on both sides of the floating element.

Use clear text property to add a picture gallery:

More examples

The left image add borders and margins and floats to the paragraph

Let us add image borders and margins and paragraph float to the left

Title and pictures to the right float

Let the title and pictures to the right float.

Let the first letter of a paragraph float to the left

Change the style so that the first letter of a paragraph float to the left.

Does not create a page with a table

Use float to create a page header, footer, left content and main content.

All CSS float property

"CSS" column indicates the number of different versions of CSS (CSS1 or CSS2) defines the property.