HomeCSS Tutorials 〉 CSS Float and Clear Properties Explained with Examples

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.

Introduction

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.

What is 'float' in CSS?

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:

Syntax ✍

float: left | right | none | inherit;

Example - Float Left:

Code : 1 📝

<!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 📌

Box A
This text flows around Box A
Try It....

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.

Example - Float Right:

Code : 2 📝

<!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 📌

Box B
This text flows around Box B on the left.
Try It....

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.

Common Problem: Collapsing Parent Height

When all child elements are floated, the parent container may collapse (i.e., have zero height).

Problem Example:

Code : 3 📝

<!DOCTYPE html>
<html>
<body>

<div style="background: #ddd;">
<div style="float: left; width: 100px; height: 100px; background: pink;"></div>
</div>

</body>
</html>

output 📌

Try It....

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.

Solution: The 'clear' Property

The 'clear' property tells an element not to wrap around floated elements.

Syntax:

Syntax ✍

clear: left | right | both | none;

Example - Using Clear:

Code : 4 📝

<!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 📌

This starts after the floated box.
Try It....

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.

Bonus: Clearing Floats with '::after'

To fix collapsing parent containers, you can use a clearfix:

Clearfix CSS:

Code : 5 📝

<!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 📌

Try It....

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.

Summary Table

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

Conclusion

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.

Suggested Posts:

Related Topics:

Frequently Asked Questions (FAQs)

What does float do in CSS?

It moves an element to the left or right, letting text or inline content wrap around it.

When should I use clear in CSS?

Use 'clear' to prevent elements from sitting beside floated elements, especially after floated blocks.

What is a clearfix?

It's a CSS technique to fix collapsed containers when child elements are floated.

Is float still used in modern CSS?

Yes, but less often. Flexbox and Grid are more powerful layout tools. Float is mostly for wrapping or legacy code.