Figure out CSS clear and float Property
CSS clear property is closely associated with float property. So to understand clear, you must have a fair understanding of float. Actually clear property functions in the backdrop of float. Let’s clarify how. Contextually, if you’re not sure of CSS float property, follow this link.
You might want to let multiple elements (div, p, img etc.) float side by side when needed especially in case of image. But what if you face unwanted floating of any element (floated element) on left and/or right of a definite element? This is the situation where you can put clear property to solve this problem.
By implementing clear property upon a definite element, you can determine whether other elements (that is floated) should float beside (left or right) the specified or cleared element or not. If you don’t allow any floated element on left of element A (suppose), put clear:left on A. Again if you disallow any floated element on right of element A, put clear:right upon A. Here comes different values of float property. They are-
- clear:none;-Default none permits floating any element on both sides.
- clear:left;-Disallows floating element on left side.
- clear:right;-Disallows floating element on right side
- clear:both;-Disallows floating element on both side
- clear:inherit;-This inherits the clear value of Parent element.
More clearly speaking, suppose element A is surrounded by element L (on left) and element R (on right). You want that A is placed in a new line independently. Neither L will be taking position on left nor will R be on right. In other word, you want to clear L from left and R from right to set A free from their clutch. How will you do that?
For this, if you put clear:left declaration on A, L will be cleared. This doesn’t mean that L will change place. L will stay still in the same place but A will move down in a new line.
Again, if you put clear:right on A, R will be cleared. This means R will remain in the same place but A will move down in a new line.
Note that, everything will function only if L is coded with float:left and R is coded with float:right. In other word, If you want to clear left-floated element, you have to put clear:left with the targeted element and in order to clear right-floated element, you should put clear:right on the targeted element.
Now, let’s pinpoint the fact with a common example. But before that let’s know why such undesirable floating of elements might occur though you think it shouldn’t–
Why elements float around other elements
All Block-level elements (h, div, section, figure, p, table etc.) starts from a new line and stretches to left and right in a definite page as far as it can. Usually, one won’t overlap others horizontally or vertically though you place them one after another in html document. But such thing might occur if-
- There is any Inline element like img.
- The parent element of any element has float property predefined to right or left etc.
Whatever the reason is, web designers often face this problem which they have to solve by implementing clear property. Now let’s play practically with a project and discover everything anew.
CSS float vs clear property
First we take a container div. Contextually, div is a Block-level element where you can put as many elements as you wish, even other div.
Inside the container div, we put a Heading (h5), another Div (div) and a Paragraph (p) sequentially. Look at the Coding (CSS and HTML)-
.container {
width:50%;
display:block;
margin:auto;
border:15px groove whitesmoke;
border-radius:10px;
padding:10px;
overflow:auto;
}
h5 {
background:#F8F8F8;
border:3px solid black;
padding:15px;
font-size:25px;
text-align:center;
}
.xyz {
background:#eeffe6;
border:1px solid black;
padding:15px;
font-size:20px;
text-align:center;
}
p {
background:#e6f3ff;
border:1px solid black;
padding:15px;
text-align:center;
}
<!DOCTYPE html> <html> <head> </head> <body> <div class="container"> <h5>a Heading (h5)</h5> <div class="xyz">a Div (div)</div> <p>a Paragraph (p)</p> </div> </body> </html>
In output we see the usual position of these three each starting in a new line. No overlapping.
OUTPUT-1
a Heading (h5)
a Paragraph (p)
Now we put float:left declaration on the div as shown below. See the effect on changing-
.xyz {
background:#eeffe6;
border:1px solid black;
padding:15px;
font-size:20px;
text-align:center;
float:left;
}
OUTPUT-2
a Heading (h5)
a Paragraph (p)
We clearly see last element Paragraph (P) has taken place right to the div overlapping it.
This happens, obviously, as we put float:left on div but it might happen for other reason as well. However if we like to put the paragraph in new line getting cleared from div, we have to put clear:left with p. See changed CSS and output.
.xyz {
background:#eeffe6;
border:1px solid black;
padding:15px;
font-size:20px;
text-align:center;
float:left;
}
p {
background:#e6f3ff;
border:1px solid black;
padding:15px;
text-align:center;
clear:left;
}
OUTPUT-3
a Heading (h5)
a Paragraph (p)
Paragraph has taken a new line as usual.
Now again let’s go into another experiment. Let’s modify the CSS-1 imposing float:right declaration with the div.
.container {
width:50%;
display:block;
margin:auto;
border:15px groove whitesmoke;
border-radius:10px;
padding:10px;
overflow:auto;
}
h5 {
background:#F8F8F8;
border:3px solid black;
padding:15px;
font-size:25px;
text-align:center;
}
.xyz {
background:#eeffe6;
border:1px solid black;
padding:15px;
font-size:20px;
text-align:center;
float:right;
}
p {
background:#e6f3ff;
border:1px solid black;
padding:15px;
text-align:center;
}
<!DOCTYPE html> <html> <head> </head> <body> <div class="container"> <h5>a Heading (h5)</h5> <div class="xyz">a Div (div)</div> <p>a Paragraph (p)</p> </div> </body> </html>
What happens? Open your HTML file with a Browser and check the result.
OUTPUT-4
a Heading (h5)
a Paragraph (p)
We see div is positioned on right but essentially p has occupied blank space left to div. Now what to do if we want to put the p in right place (in new line) getting cleared from div?
For this we have to put clear:right with p. See the changed CSS and check the result–
p {
background:#e6f3ff;
border:1px solid black;
padding:15px;
text-align:center;
clear:right;
}
OUTPUT-5
a Heading (h5)
a Paragraph (p)
We see p has taken usual position in new line.
Thus our experiment regarding float and clear property proved to be successful.
Hope you could remove all hesitation on float and clear property. You can give a try yourself with different elements and different CSS values as you wish and turn you an expert. If you do so, let me know all your success, failure and challenges by commenting.
