The CSS float property is used to position an element to the left or right of its container. It allows surrounding content to wrap around the floated element.
- Aligns elements to the left or right and supports values such as left, right, and none.
- Allows text and other content to flow around floated elements, making it useful for image positioning.
- Works with the clear property to control the behavior of floated elements and prevent layout issues.
Syntax:
float: none | left | right | initial | inherit;Property values
- none : Default value; the element does not float.
- left : Floats the element to the left, allowing content to wrap on its right side.
- right : Floats the element to the right, allowing content to wrap on its left side.
- initial : Sets the property to its default value.
- inherit : Inherits the float value from the parent element.
Examples of CSS Float
Some examples of CSS Float are discussed below:
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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
</head>
<body>
<!--Driver Code Ends-->
<div class="GFG"
style="font-size:40px;
color:#006400;
float:left;">
GeeksforGeeks
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
</head>
<body>
<!--Driver Code Ends-->
<div class="GFG"
style="font-size:40px;
color:#006400;
float:right;">
GeeksforGeeks
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title>CSS Float</title>
</head>
<body>
<!--Driver Code Ends-->
<div class="GFG"
style="font-size:40px;
color:#006400;
float:none;">
GeeksforGeeks
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->
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.
<!--Driver Code Starts-->
<!DOCTYPE html>
<html>
<head>
<title> CSS Float</title>
</head>
<body>
<!--Driver Code Ends-->
<div style="float:right">
<div class="GFG"
style="font-size:40px;
color:#006400;
float:inherit;">
GeeksforGeeks
</div>
</div>
<!--Driver Code Starts-->
</body>
</html>
<!--Driver Code Ends-->