In this chapter, you will learn about the CSS Float and Clear properties. These properties were commonly used to create layouts before Flexbox and Grid became popular. They are still useful to understand, especially when working with older websites or when you want content to flow around an image. Let’s understand how CSS Float and Clear work step by step.
What is CSS Float property?
The float property moves an element to the left or right side of its container. The content that comes after it can flow around the floated element. The most commonly used values are:
leftrightnone
1. Float: Left
The float: left property moves an element to the left side.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Float Left</title>
<style>
.box {
float: left;
width: 150px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
margin-right: 15px;
}
</style>
</head>
<body>
<div class="box">Float Left</div>
<p>
This text appears next to the box because the box is floated to
the left side. The text continues around the floated element.
</p>
</body>
</html>
The box moves to the left, and the paragraph text flows beside it.
2. Float: Right
The float: right property moves an element to the right side.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Float Right</title>
<style>
.box {
float: right;
width: 150px;
height: 100px;
background-color: lightgreen;
border: 2px solid green;
margin-left: 15px;
}
</style>
</head>
<body>
<div class="box">Float Right</div>
<p>
This text appears beside the box because the box is floated to
the right side. The text flows around the floated element.
</p>
</body>
</html>
The box moves to the right, while the text appears beside it.
3. Float: None
The value none is the default value.
.box {
float: none;
}
This means the element will stay in its normal position. Most elements do not need this property unless you want to remove a previously applied float.
Floating Multiple Elements
You can also float multiple elements next to each other.
Example
<!DOCTYPE html>
<html>
<head>
<title>Multiple Floated Elements</title>
<style>
.box {
float: left;
width: 120px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
margin: 10px;
padding: 10px;
}
</style>
</head>
<body>
<div class="box">Box 1</div>
<div class="box">Box 2</div>
<div class="box">Box 3</div>
</body>
</html>
The boxes will try to appear next to each other because each box is floated to the left. If there is not enough space, the next box will move to a new line.
What is CSS Clear property?
The clear property is used to control how an element behaves next to floated elements. For example:
p {
clear: both;
}
This prevents the paragraph from appearing beside a floated element. The commonly used values are:
leftrightboth
Using clear: left
The clear: left value prevents an element from appearing next to a left-floated element.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear Left</title>
<style>
.box {
float: left;
width: 150px;
height: 100px;
background-color: lightblue;
border: 2px solid blue;
}
.text {
clear: left;
}
</style>
</head>
<body>
<div class="box">Float Left</div>
<p class="text">
This paragraph starts below the floated box.
</p>
</body>
</html>
Because of clear: left, the paragraph moves below the box instead of appearing beside it.
Using clear: both
The clear: both value prevents an element from appearing next to either a left-floated or right-floated element.
Example
<!DOCTYPE html>
<html>
<head>
<title>CSS Clear Both</title>
<style>
.left-box {
float: left;
width: 100px;
height: 100px;
background-color: lightblue;
}
.right-box {
float: right;
width: 100px;
height: 100px;
background-color: lightgreen;
}
.text {
clear: both;
}
</style>
</head>
<body>
<div class="left-box">Left</div>
<div class="right-box">Right</div>
<p class="text">
This paragraph appears below both floated boxes.
</p>
</body>
</html>
The paragraph starts below both boxes because of:
clear: both;Should You Use Float for Layouts?
In older websites, float was often used to create page layouts. Today, CSS provides better layout tools such as:
- Flexbox
- CSS Grid
These are easier to use for creating modern layouts. However, float is still useful when you want text to flow around an element, such as an image.
Quick Recap
- The
floatproperty moves an element to the left or right. float: leftmoves an element to the left.float: rightmoves an element to the right.float: nonekeeps an element in its normal position.- The
clearproperty controls how elements behave around floated elements. clear: leftclears left-floated elements.clear: rightclears right-floated elements.clear: bothclears both left and right floats.- Flexbox and Grid are commonly used for modern layouts.
Mini Quiz
Frequently Asked Questions (FAQs)
Q1. What is CSS float and clear?
CSS float moves an element to the left or right, while clear controls whether an element can appear beside floated elements.
Q2. What is the CSS float property used for?
The CSS float property is used to move an element to the left or right side of its container. Other content can then flow around it.
Q3. How to use float in CSS?
You can use float: left; or float: right; to move an element to either side of its container.
Q4. Is there a CSS float tutorial for beginners?
Yes, a CSS float tutorial for beginners explains how the float property works, including float: left, float: right, and how content flows around floated elements.
Q5. Is CSS float still used for layouts?
CSS Float is still useful for making text flow around images or other elements. However, modern layouts are usually created with Flexbox or CSS Grid.
Q6. What is the CSS clear property?
The CSS clear property controls how an element behaves around floated elements. It can prevent an element from appearing beside a left-floated, right-floated, or both types of floated elements.
Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.
