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