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






                        filter_none








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







                        filter_none








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







                        filter_none








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







                        filter_none








Output:


float-inherit



          
          
          
          

            

    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Qubot
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.