Skip to content
Related Articles

Related Articles

CSS Float
  • Last Updated : 17 May, 2021

Float is a CSS property written in CSS file or directly in the style of an element. The float property defines the flow of content. Below are the types of floating properties:

 

Float typeUsage
float: leftElement floats on left side of the container
float: rightElement floats on right side of container
float: inheritElement inherits floating property of it’s parent (div, table etc…)
float: noneElement is displayed as it is (Default).

float:left 
 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Float</title>
</head>
<body>
<div class = "GFG" style = "font-size:40px;
color:#006400; float:left;">
    GeeksforGeeks
</div>
</body>
</html>                   

Output: 
 



 

float:right 
 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Float</title>
</head>
<body>
<div class = "GFG" style = "font-size:40px;
color:#006400; float:right;">
    GeeksforGeeks
</div>
</body>
</html>  

Output: 
 

 

float:none 
 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Float</title>
</head>
<body>
<div class = "GFG" style = "font-size:40px;
color:#006400; float:none;">
    GeeksforGeeks   
</div>
</body>
</html>   


 

float:inherit
 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>Float</title>
</head>
<body>
<div style="float:right">
    <div class = "GFG" style = "font-size:40px;
    color:#006400; float:inherit;">
        GeeksforGeeks
    </div>
</div>
</body>
</html>

Output: 
 

 
My Personal Notes arrow_drop_up
Recommended Articles
Page :