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> |
chevron_right
filter_none
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> |
chevron_right
filter_none
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> |
chevron_right
filter_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> |
chevron_right
filter_none
Output:
Recommended Posts:
- Comparing float value in PHP
- p5.js | float() function
- How to format a float in JavaScript ?
- How to convert string into float in JavaScript?
- Bootstrap | Float utilities with Examples
- How to make elements float to center?
- How to move H2 Beneath H1 by using only float property ?
- How to float three div side by side using CSS?
- Create a Hoverable Side Navigation with HTML, CSS and JavaScript
- JavaScript Interview Questions and Answers | Set 3
- When to use Vanilla JavaScript vs jQuery ?
- How to detect the user browser ( Safari, Chrome, IE, Firefox and Opera ) using JavaScript ?
- How to animate scrollTop using jQuery ?
- How to select text nodes using jQuery ?
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.
