The CSS clear property is used to control the behavior of floated elements. When elements are floated, they are taken out of the normal flow of the document, allowing other elements to wrap around them.
The clear property specifies which sides of an element should not allow floating elements to be positioned. It affects how the element interacts with floated elements that come before it in the document flow.
The clear property can take the following values:
- clear: none; (default): No sides are cleared, and the element can be positioned alongside floated elements.
- clear: left;: The element does not allow floated elements on the left side. It will be moved below any preceding floated elements.
- clear: right;: The element does not allow floated elements on the right side. It will be moved below any preceding floated elements.
- clear: both;: The element does not allow floated elements on either side. It will be moved below any preceding floated elements.
Example on How to Use Css Clear Property
In this example, we are going to first create two elements, which will be floated, and then we would create the third element which will not be floated. The idea is to show us what happens to the element which comes after floated element
Html
<div class="float-left">Float left</div>
<div class="float-right">Float right</div>And the corresponding CSS:
Css
.float-left {
width: 70px;
height: 40px;
border: 2px solid red;
float: left;
}
.float-right {
float: right;
width: 70px;
height: 40px;
border: 2px solid green;
}
Notice how nicely the two elements are separated apart using the float property and the appropriate values
Next, we want to add another element which contains text to this webpage immediately after the floated elements, so our Html code now becomes
Html
<div class="float-left">Float left</div>
<div class="float-right">Float right</div>
<div class="clear-both">lorem200 add 200 words here</div>
The result this time around becomes;
You can combine the knowledge you have gained with this guide in order to create a responsive navbar using Html and Css
You can clearly see how the new element and its text contents flow around the floated elements. This is mostly not what you want, so make the new element move to the next line, all we need to do is to use the clear property as shown below in our Css. Hence our new Css becomes
Css
.float-left {
width: 70px;
height: 40px;
border: 2px solid red;
float: left;
}
.float-right {
float: right;
width: 70px;
height: 40px;
border: 2px solid green;
}
.clear-both {
clear: both;
border: 2px solid blue;
}
Result
In this example, the first two <div> elements are floated to the left and right respectively. The third <div> has the clear: both; property applied, which clears both the left and right floats. This causes the third <div> to be placed below the floated elements.
The clear property is commonly used in layouts to control the positioning and wrapping of floated elements. It helps create the desired layout and prevents elements from overlapping or misaligning when using floats.
Hopefully you understand how to use the float