Home 〉 CSS Tutorials 〉 CSS Float and Clear Properties Explained with Examples
CSS Float and Clear Properties Explained with Examples !
Want text to wrap around images or elements to float left/right? The `float` property lets you position elements beside each other, and `clear` helps manage layout breaks. Though less used today due to Flexbox and Grid, it's still important in legacy layouts. Also, learn how float affects container heights.
The CSS 'float' and 'clear' properties are used to position elements side-by-side and manage how they interact with other elements on the page. These were heavily used in older layout techniques and are still useful in some cases.
The 'float' property allows elements (like images, divs, boxes) to be taken out of the normal flow and pushed to the left or right of their container.
Syntax ✍
float: left | right | none | inherit;
<!DOCTYPE html>
<html>
<body>
<div style="float: left; width: 100px; height: 100px; background: lightblue;">
Box A
</div>
<div>
This text flows around Box A
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Box A is floated to the left, and the following content flows around it.
<!DOCTYPE html>
<html>
<body>
<div style="float: right; width: 100px; height: 100px; background: lightgreen;">
Box B
</div>
<div>
This text flows around Box B on the left.
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: Box B is floated to the right, and the next content wraps around it on the left.
When all child elements are floated, the parent container may collapse (i.e., have zero height).
<!DOCTYPE html>
<html>
<body>
<div style="background: #ddd;">
<div style="float: left; width: 100px; height: 100px; background: pink;"></div>
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
The parent '<div>' won't expand to contain the floated child.
The 'clear' property tells an element not to wrap around floated elements.
Syntax ✍
clear: left | right | both | none;
<!DOCTYPE html>
<html>
<body>
<div style="float: left; width: 100px; height: 100px; background: orange;"></div>
<div style="clear: both;">
This starts after the floated box.
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: The second '<div>' clears any floated elements before it and starts on a new line.
To fix collapsing parent containers, you can use a clearfix:
<!DOCTYPE html>
<html>
<head>
<style>
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div class="clearfix" style="background: #eee;">
<div style="float: left; width: 100px; height: 100px; background: salmon;"></div>
<div style="float: right; width: 100px; height: 100px; background: skyblue;"></div>
</div>
</body>
</html>
output 📌
You can Try the above code by changing the values in our user-friendly code editor by clicking the "Try It" button and see the output of the same.
Explanation: The clearfix makes sure the parent contains both floated children.
Property | Use Case | Values | Description |
---|---|---|---|
`float` | Align elements | `left`, `right` | Moves element to side |
`clear` | Prevent wrap | `left`, `right`, `both` | Stops elements from wrapping around floats |
The 'float' and 'clear' properties are useful for simple layouts or wrapping text around images. Although modern CSS uses Flexbox and Grid for layout, understanding float is essential for reading or maintaining older code.
Practice using 'float' for image-text layouts and apply 'clear' to avoid layout issues. Knowing how and when to use them will strengthen your CSS fundamentals.
It moves an element to the left or right, letting text or inline content wrap around it.
Use 'clear' to prevent elements from sitting beside floated elements, especially after floated blocks.
It's a CSS technique to fix collapsed containers when child elements are floated.
Yes, but less often. Flexbox and Grid are more powerful layout tools. Float is mostly for wrapping or legacy code.