CSS Float

The CSS float property is used to control the positioning of an element within its parent container.
When you apply the float property to an element, it can be moved to the left or right of its containing element and have other contents flow around it.

Note: web layout is also just the same as print design.

CSS Float property

Property	Description	Values
clear	The clear property avoids elements after the floating elements that flow around it.	left, right, both, none, inherit
float	It specifies whether the box should float or not.	left, right, none, inherit

CSS Float Property Values

Value	Description
none	It specifies that the element is not floated, and will be displayed just where it occurs in the text, this is a default value.
left	It is used to float the element to the left.
right	It is used to float the element to the right.
initial	It sets the property to its initial value.
inherit	It is used to inherit this property from its parent element.

Example:

<!DOCTYPE html> 
<html> 

<head> 
    <style>
        img {
            float: right;
        }
    </style> 
</head> 

<body> 
    <p>The following paragraph contains an image with style  
        <b>float:right</b>. The result is that the image will float to the right in the paragraph.
    </p> 
    <img src="good-morning.jpg" alt="Good Morning Friends" />  
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    This is some text. This is some text. This is some text. 
    </p> 
</body> 

</html>

Output: