CSS Float

The CSS float property is a positioning property.It displays an HTML element either left or right and allowing other element to wrap around the floated element.

CSS Float Property Value

left-It is used to float the element to the left.
right-It is used to float the element to the right.
none-It removes the float property from an element.
inherit-It is used to inherit float property from its parent element.

The CSS float property is used to place an HTML element either in the left or right direction. You have to clear this float property so that other elements can flow in the normal flow.

CSS Float: Right

General Syntax

     img {
 float: right;
}

Source Code

img {
 float: right;
}

Code Explanation

Note:In this example, the CSS right property of the float is used. After applying CSS float:right property, the element is shifted to the right of the container.

CSS Float:Left

General Syntax

     img {
 float: left;
}

Source Code

img {
 float: left;
}

Code Explanation

In this example, the CSS float left property applies to the HTML element. It shifts the floated item to the left of the container while the rest of the content wraps around the floated element.

Floating Element Next To Each Other

Basically,block lavel element i.e(<div>)displays top to bottom.After providing float property to the block label element exit inside container,it displays all the floated item next to each other.

General Syntax

     div {
 float: left;
 padding: 15px;
}

Source Code

div {
 float: left;
 padding: 15px;
}
.example1 {
 background: orange;
}
.example2 {
 background: pink;
}
.example3 {
 background: green;
}

Code Explanation

Note:In this example, the CSS float left property has been applied to more than one HTML element. It displays the floated item to next to each other.

Online Test / Quiz

Question set 1

Our Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS