CSS Float


What is CSS Float?

image.png

CSS "float" property will move the element to the left or right, and the surrounding elements will also be rearranged.

Float is often used for images, but it is also very useful in layout.


How Does Element 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 will try to move to the left or right until its outer edge touches the border of the containing box or another floating box.

The elements 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 around it to the left:

Example

img
{
    float:right;
}

 Try It! 


Floating Elements Next To Each Other

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

For example, we use the float attribute for the image gallery:

Example

.thumbnail
{
    float:left;    
    width:110px;    
    height:90px;    
    margin:5px;
}

 Try It! 


Clear Float - Use clear

After the element is floated, the surrounding elements will be rearranged. To avoid this, use the clear attribute.

The clear attribute specifies that no floating elements can appear on both sides of the element.

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

Example

.text_line
{
    clear:both;
}

 Try It! 


Examples

More Examples

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

Title and image float to the right

Let the title and image float to the right.

Set 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 tables

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


Floating Properties in CSS

The number in the "CSS" column indicates that the different CSS version (CSS1 or CSS2) defines the property.

PropertyDescriptionValueCSS
clearSpecifies that no floating elements are allowed around the element.left
right
both
none
inherit
1
floatSpecify whether a box (element) can float.left
right
none
inherit
1