Introduction to CSS Clear Float
CSS clear property is more similar like a float property. It decides whether the element is next to floated elements or whether it is moving the bottom of the floated element. This clear property can also be applied with both non- floated and floated elements. Whether the element will fit in the horizontal area just next to the floated value elements, yes obviously it does. Unless you have applied float element will be aligned in the same direction as the clear property does. Then the clear element will automatically move just the bottom of the floated elements. Every clear property has the following values.
1. None – Default clear property value, it does not apply any value to the clear property.
2. Left – Left value makes the element moved down to the left float.
3. Right – Right value makes the element moved down to the right float.
4. Both – Both value makes the element moved down to the left float and right float.
Syntax:
element
{
clear: none;
}
element
{
clear: left;
}
element
{
clear: right;
}
element
{
clear: both;
}The CSS float property specifies where the element should float. By using this float property we can place the elements along the left or right side of its container. The possible float property value is given below.
1. Left – The element placed on the left side of the container.
2. Right – The element placed on the right side of the container.
3. None – Default float property, does not apply any float values to the property.
Syntax:
element
{
float: none;
}
element
{
float: left;
}
element
{
float: right;
}This both CSS clear float properties collectively used to add quality design.
Examples
Here are the following examples mention below
Example #1 – Float let and clear left
Code:
<!DOCTYPE html>
<html>
<title>
Float Clear
</title>
<head>
<style>
h1
{
color: red;
text-align: center;
}
.containerDiv {
border: solid thin white;
}
.containerDiv {
border: solid thin white;
}
.left {
float: left;
width: 150px;
margin-right: 11px;
background-color: green;
height: 150px;
}
.text {
clear: left;
}
p
{
color: brown;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Demonstration for float left and clear left</h1>
<div class="containerDiv">
<div class="left"></div>
<div class="left"></div>
<p class="text">CSS clear property is more similar to the float property. It decides whether an element should be next to the floated elements or whether it should move below of the floated element. This clear property can also applied with both floated and non-floated elements. If an element can fit in the horizontal area space next to the floated elements, yes it does. Unless you have applied the clear property to the element in the same float element direction. Then the element will automatically move just below the floated elements. Every clear property have following values.</p>
</div>
</body>
</html>Output:
Example #2 – Float right clear right
Code:
<!DOCTYPE html>
<html>
<title>
Float Clear
</title>
<head>
<style>
h1
{
color: blue;
text-align: center;
}
.containerDiv {
border: solid thin white;
}
.right {
float: left;
width: 150px;
margin-right: 11px;
background-color: green;
height: 150px;
}
.text {
clear: right;
}
p
{
color: navy;
font-size: 20px;
}
</style>
</head>
<body>
<h1>Demonstration for float left and clear left</h1>
<div class="containerDiv">
<div class="right"></div>
<div class="right"></div>
<p class="text">CSS clear property is more similar to the float property. It decides whether an element should be next to the floated elements or whether it should move below of the floated element. This clear property can also applied with both floated and non-floated elements. If an element can fit in the horizontal area space next to the floated elements, yes it does. Unless you have applied the clear property to the element in the same float element direction. Then the element will automatically move just below the floated elements. Every clear property have following values.</p>
</div>
</body>
</html>Output:
Example #3 – Float left and right and Clear both
Code:
<!DOCTYPE html>
<html>
<title>
Line break
</title>
<head>
<style>
h1
{
color: orange;
text-align: center;
}
.containerDiv {
border: solid thin white;
}
.left {
float: left;
height: 150px;
width: 150px;
margin-right: 11px;
background-color: blue;
}
.right {
float: right;
height: 150px;
width: 150px;
margin-right: 11px;
background-color: green;
}
.text {
clear: both;
}
p
{
color: fuchsia;
font-size: 22px;
}
</style>
</head>
<body>
<h1>Demonstration for float left and clear left</h1>
<div class="containerDiv">
<div class="left"></div>
<div class="right"></div>
<p class="text">CSS clear property is more similar to the float property. It decides whether an element should be next to the floated elements or whether it should move below of the floated element. This clear property can also applied with both floated and non-floated elements. If an element can fit in the horizontal area space next to the floated elements, yes it does. Unless you have applied the clear property to the element in the same float element direction. Then the element will automatically move just below the floated elements. Every clear property have following values.</p>
</div>
</body>
</html>Output:
Conclusion – CSS Clear Float
Clear float properties are collectively used to align the HTML elements in Left, Right, and both directions at a time. This will make web design quality.
Recommended Articles
This is a guide to CSS Clear Float. Here we discuss the appropriate syntax of CSS Clear Float with programming examples for better understanding. You may also look at the following articles to learn more –
All in One Software Development Bundle (600+ Courses, 50+ projects)
9 Online Courses | 9 Hands-on Projects| 61+ Hours| Verifiable Certificate of Completion
4.5
View Course
600+ Online Courses
50+ projects
3000+ Hours
Verifiable Certificates
Lifetime Access
