CSS Float (Floating)

CSS Float (floating).

The CSS float property defines which direction an element floats, and the floating element generates a block-level box until the outer edge of the block-level box touches the containing box or other floating box.

What is CSS Float??

Float of CSS causes elements to move left or right, and the elements around them are rearranged.

Float is often used for images, but it is just as useful when layout.

How the element floats

The horizontal direction of the element floats, meaning that the element can only move left and right, not up and down.

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

The element after the floating element will surround it.

Elements before floating elements will not be affected.

If the image floats to the right, the following text stream wraps to its left:

Floating elements adjacent to each other

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

Here, we use the float property for the gallery:

Clear Float - Use clear

After the element floats, the surrounding elements are rearranged, and to avoid this, use the clear property.

The clear property specifies that floating elements cannot appear on either side of an element.

Use the clear property to add a gallery to the text:

Tip: If you would like to learn more about the clear property, please visit the CSS reference manual on this site: CSS clear property.

More instances

Add borders and margins to the image and float to the right of the paragraph

Let's add borders and margins to the image and float to the right of the paragraph

The title and picture float to the right

Let the title and picture float to the right.

Let the first letter of the paragraph float to the left

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

Create a Web page without a table

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

All floating properties in CSS

The numbers in the "CSS" column indicate that the property is defined by different CSS versions (CSS1 or CSS2).

Related articles

CSS Reference Manual: CSS float property