🎨 CSS Float and Clear - Simple Guide
What is Float?
Float moves an element to the left or right side of its container. Other content flows around it like water flowing around a rock in a river!
Float moves an element to the left or right side of its container. Other content flows around it like water flowing around a rock in a river!
1. Float Left Example
The green box is floated left. Watch how text wraps around it:
I'm floating left!
This is normal text. See how it flows around the floated element? It's like the floated box is a rock in a river and the text is water flowing around it. This is the main purpose of float - to make text wrap around images or other elements.
.float-left {
float: left;
width: 150px;
height: 100px;
}
2. Float Right Example
The red box is floated right:
I'm floating right!
This text wraps around the right-floated element. Notice how the text starts from the left but wraps around the red box on the right side. This is commonly used for images in articles.
.float-right {
float: right;
width: 150px;
height: 100px;
}
3. Both Left and Right Float
Green floated left, red floated right:
Left float
Right float
This text flows between both floated elements. It's squeezed in the middle space. This creates a nice layout effect!
What is Clear?
Clear stops elements from flowing around floated elements. It's like saying "I don't want to be next to any floated elements!"
Clear stops elements from flowing around floated elements. It's like saying "I don't want to be next to any floated elements!"
4. Clear Left Example
Blue box uses clear: left to avoid left-floated elements:
I'm floating left
This text wraps around the floated element.
I use clear: left - I won't be next to left-floated elements!
.clear-left {
clear: left;
}
5. Clear Right Example
Purple box uses clear: right:
I'm floating right
This text wraps around the right-floated element.
I use clear: right - I won't be next to right-floated elements!
6. Clear Both Example
Orange box uses clear: both (most common):
Left float
Right float
Text flows between both floated elements.
I use clear: both - I won't be next to ANY floated elements!
.clear-both {
clear: both; /* This is the most commonly used */
}
🎮 Interactive Demo
Click buttons to see different float and clear effects:
Click a button above to see different float and clear effects in action!
Key Points to Remember:
• Float: Moves element left or right, other content flows around it
• Clear: Stops flowing around floated elements
• clear: both is most commonly used
• Modern CSS uses Flexbox and Grid instead of float for layouts
• Float is still useful for wrapping text around images
• Float: Moves element left or right, other content flows around it
• Clear: Stops flowing around floated elements
• clear: both is most commonly used
• Modern CSS uses Flexbox and Grid instead of float for layouts
• Float is still useful for wrapping text around images
Common Use Cases
1. Image in text (like in newspapers):
This is how you create magazine-style layouts where images float and text wraps around them naturally. The image floats left and the text flows around it beautifully.
2. Simple two-column layout:
Left Column
This could be your main content area.
Right Column
This could be your sidebar with links and info.