Loading

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

PropertyDescriptionValues
clearThe clear property avoids elements after the floating elements that flow around it.left, right, both, none, inherit
floatIt specifies whether the box should float or not.left, right, none, inherit

CSS Float Property Values

Value                                                Description
noneIt specifies that the element is not floated, and will be displayed just where it occurs in the text, this is a default value.
leftIt is used to float the element to the left.
rightIt is used to float the element to the right.
initialIt sets the property to its initial value.
inheritIt 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: