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: