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.
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.
img {
float: right;
} img {
float: right;
}
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.
img {
float: left;
} img {
float: left;
}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.
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.
div {
float: left;
padding: 15px;
} div {
float: left;
padding: 15px;
}
.example1 {
background: orange;
}
.example2 {
background: pink;
}
.example3 {
background: green;
}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.