CSS Float
The float property in CSS positions an element to the left or right of its container, so that other content like text can wrap around it.
- Originally used for wrapping text around images.
- Floated elements are taken out of normal flow and pushed left or right.
- Other content (inline text or inline-blocks) flows around it.
- To stop elements from wrapping, use the clear property.
Syntax
.element {
float: left; /* or right, none, inherit */
}
Float Property Values in CSS
The float property in CSS accepts four main values. Each value changes how the element behaves inside its container:
float: left;
- The element is moved to the left side of its container.
- Other inline content (like text or inline elements) will wrap around the right side of the floated element.
- Commonly used for images aligned to the left.
Example:
.image {
float: left;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Left Example</title>
<style>
.box {
width: 80px;
height: 40px;
background: #3498db;
color: #fff;
text-align: center;
line-height: 40px;
float: left;
margin: 5px;
}
</style>
</head>
<body>
<h2>Float: left</h2>
<div class="box">Left</div>
<p>This text wraps around the blue box because it is floated to the left.</p>
</body>
</html>Output :
float: right;
- The element is positioned on the right side of its container.
- Other content will wrap around the left side.
- Useful for sidebars, call-to-action buttons, or images aligned right.
Example:
.image {
float: right;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Right Example</title>
<style>
.box {
width: 80px;
height: 40px;
background: #e67e22;
color: #fff;
text-align: center;
line-height: 40px;
float: right;
margin: 5px;
}
</style>
</head>
<body>
<h2>Float: right</h2>
<div class="box">Right</div>
<p>This text wraps around the orange box because it is floated to the right.</p>
</body>
</html>Output :
float: none; (Default)
- The element remains in the normal document flow.
- It does not float to the left or right.
- This is the default behavior for most block elements like
<div>or<p>.
Example:
.text {
float: none;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float None Example</title>
<style>
.box {
width: 80px;
height: 40px;
background: #2ecc71;
color: #fff;
text-align: center;
line-height: 40px;
float: none; /* default */
margin: 5px;
}
</style>
</head>
<body>
<h2>Float: none</h2>
<div class="box">None</div>
<p>The green box stays in the normal flow. Text appears below it, not beside it.</p>
</body>
</html>Output :
float: inherit;
- The element inherits the float value of its parent.
- Useful when you want child elements to follow the same float behavior as their container.
Example:
.child {
float: inherit;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Float Inherit Example</title>
<style>
.parent {
float: left;
background: #9b59b6;
padding: 10px;
margin: 10px;
}
.child {
width: 80px;
height: 40px;
background: #f39c12;
color: #fff;
text-align: center;
line-height: 40px;
float: inherit; /* inherits from parent */
}
</style>
</head>
<body>
<h2>Float: inherit</h2>
<div class="parent">
Parent (floated left)
<div class="child">Inherit</div>
</div>
<p>The yellow child box inherits the float value from its purple parent, so it also floats left.</p>
</body>
</html>Output :
