In the previous article, you learned about float property which float any element in left or right side of its containing block. The next element in the HTML flow is stacked right or left after the floated element. What if you don’t want this to happen ?
Float without clear
If you wish to prevent right or left floating element for some HTML element, then use clear property. Let us understand the problem with an example first;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Page without Clear Property</title>
<style>
.container{
width:50%;
border: 1px solid black;
}
.box{
float: left;
width: 190px;
height: 100px;
background-color: red;
padding: 10px;
margin:10px;
}
</style>
</head>
<body>
<h1>Page without clear property</h1>
<div class="container">
<div class="box">
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem a illo, rem adipisci quae dicta
at pariatur perspiciatis iusto ut quam in ab doloribus ipsa officiis? Dolorum recusandae repellat perferendis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora amet repellendus soluta enim veritatis vero, rem,
laboriosam quia sequi incidunt dolorum! Tempora fugiat animi voluptas eaque culpa, molestias dolorem asperiores.</p>
</div>
</body>
</html>In the above example, there are two elements – a div box and a paragraph element. The div element is floated to the left. So far, no clear property is set on any element.
Float with clear
There is no clear property set on the paragraph element which comes next after the floating red box (a div element). Since, there is a floating element next to the paragraph, and we want to get remove the floating element , use the clear property. Also, note that we do not want to cancel the floating element.
p{
clear: left;
}The above CSS code, will clear the floating element to the left of the paragraph. You can see the output after clear property is set on the paragraph element (<p>).
The clear property has removed the left float from paragraph and it starts on its own block. The original floating red div box is still floating left.
Values for clear property
The clear property can have any one of the listed values.
- none
- left
- right
- both
clear: none;
This value explicitly allows floating left and right for any element. If not set , you can still float elements on both sides.
clear: left;
If there A is a left floating element for an element B that have clear left set, then element B will start in a new block below floating element. You have already seen an example previously. Here is another one.
The paragraph is not allowing any left floating element and starts in a new block. Note that a paragraph is also a block level element , but the image floating left is an inline element. Read HTML tutorial to know more about block and inline elements.
clear: right;
If A is a right floating element for an element B that have clear right set , the element B will start in a new block below floating element. Consider following example.
The element A is the image of a dog floating right of the container, and element B is the paragraph with clear right set. As a result, paragraph element will start in a new block below image.
clear: both;
The clear both value set on an HTML element will not allow any floating elements on either left side or right side of the element. This value is required when you want your element to standalone in it’s own block below floating elements. These floating elements could be left floating as well as right floating.
Let’s see an example,
The container block has two floating blocks – one left and one right , and central area is occupied by a paragraph element. You want a separate block for paragraph and floating blocks should occupy its own space above it. This is achievable through clear property with a value of ‘both‘.
When you don’t set clear: both; for an element, in this case, the paragraph element, other elements can float to left or right of the paragraph. See image above.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Clear Both</title>
<style>
.container{
width:30%;
border: 1px solid black;
padding: 20px;
}
.box1{
width:40px;
height: 160px;
float:left;
padding: 10px;
margin:10px;
background-color: yellow;
}
.box2{
width:40px;
height: 160px;
float:right;
padding: 10px;
margin: 10px;
background-color:gold;
}
p{
clear:both;
padding:10px;
margin:10px;
}
</style>
</head>
<body>
<div class="container">
<h1>Clear both</h1>
<div class="box1">
<strong>Box1</strong>
</div>
<div class="box2">
<strong>Box2</strong>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem a illo, rem adipisci quae dicta
at pariatur perspiciatis iusto ut quam in ab doloribus ipsa officiis? Dolorum recusandae repellat perferendis?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora amet repellendus soluta enim veritatis vero, rem,
laboriosam quia sequi incidunt dolorum! Tempora fugiat animi voluptas eaque culpa, molestias dolorem.</p>
</div>
</body>
</html>In the above code, I have set the clear property to ‘both’ for the paragraph element. You can see the output below.
Figure 6: After applying clear: both; the element is contained in its own block
The element is displayed in its own block after clear:both; property is set on paragraph. It will not allow any right or left float.
Summary
In this article, you learned about CSS clear property which does not allow floating HTML elements around a specific HTML element to which it is applied.
The clear property take 4 values – none, left, right and both. They are important when you decide to make layouts using floating objects using HTML and CSS.
Next we will see some advanced layout options with Display property.