This example tells how CSS float works by placing the image on the left side of the text.
Output: The image sits neatly on the left at 120x120 size, and the text wraps nicely right beside it.CSS Float
In a webpage, if you want text or an image inside a container box without overlapping, then you want to use the float property. By setting four values like (left, right, none, inherit), left or right positions the element to that side of the container, none applies no floating, and inherit takes the float value from its parent element.
Note: This property only floats the element itself; it doesn’t automatically float the image or figure.
Syntax:
selector {
float: left | right | none |inherit;
}
Where:
Left → When you set this property, it moves the HTML element to the left side of the container box.
Right → When you set this property, it moves the HTML element to the right side of the container box.
None → If you don’t set any floating property, then it does not apply the float within the container box.
Inherit → When you set this property, it inherits the float property from its parent element within the container box.
Example:
