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

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

float-left

float:right

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

float-right

folat:none

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


float-none

float:inherit

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

float-inherit


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.