CSS Float
The CSS float property is used to move an element out of the normal document flow and position it to the left or right of its container. For example, float: left moves the element to the left, and float: right moves it to the right.
Other content will wrap around the floated element which helps to create a more dynamic layout. Although there's no direct float: center in CSS, you can use other methods like margins to center elements.
Syntax
float: none | left | right | initial | inherit;Property values
| Value | Description |
|---|---|
none | Default value; the element does not float. |
left | Element floats on the left side of the container, allowing content to flow around its right side. |
right | Element floats on the right side of the container, allowing content to flow around its left side. |
initial | Element is set to its default value. |
inherit | The element inherits the floating property from its parent element. |
We will use the above property values & understand their usage through the example.
Examples of CSS Float
Example 1: Using CSS float: left
The float: left; CSS property positions an element on the left side of its container, allowing content to flow around its right side.
<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
</head>
<body>
<div class="GFG"
style="font-size:40px;
color:#006400;
float:left;">
GeeksforGeeks
</div>
</body>
</html>
Output:
Example 2: Using CSS float: right
The float: right; CSS property positions an element on the right side of its container, allowing content to flow around its left side.
<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
</head>
<body>
<div class="GFG"
style="font-size:40px;
color:#006400;
float:right;">
GeeksforGeeks
</div>
</body>
</html>
Output:
Example 3: Using CSS float: none
The float: none; CSS property resets the floating behavior of an element, causing it to not float and remain in the normal document flow.
<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
</head>
<body>
<div class="GFG"
style="font-size:40px;
color:#006400;
float:none;">
GeeksforGeeks
</div>
</body>
</html>
Output:
Example 4: Using CSS float: inherit
The float: inherit; CSS property makes an element inherit the float value from its parent element, ensuring consistency with the parent's floating behavior.
<!DOCTYPE html>
<html>
<head>
<title> CSS 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:
Supported Browsers
The CSS float property is widely supported across major browsers:
- Google Chrome 5.0
- Edge 12
- Mozilla 4.0
- Safari 5.0
- Opera 11.1
Note: These versions indicate when support for the float property was introduced. Since it's an older CSS feature, it is fully supported in all modern browsers.
