Tutorialspoint.dev

CSS Float

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 type Usage
float: left Element foats on left side of the container
float: right Element floats on right side of container
float: inherit Element inherits floating property of it’s parent (div, table etc…)
float: none Element is displayed as it is (Default).

float:left

<!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-left

float:right

<!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-right

folat:none

<!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-none

float:inherit

<!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:

float-inherit


This article is attributed to GeeksforGeeks.org

leave a comment

code

0 Comments

load comments

Subscribe to Our Newsletter