what is the use of this div tag with only clear rule

Question

I was noticing that <div style="clear:both;"></div> had been frequently used in a website between div areas. Given the fact that no other rules such as width and height has been specified for this, what is the effect of this type of usage? an example of the site code follows below

<div id="content">
<div id="middle-cont"></div>
<div id="bot-r">
  <div style="clear:both;"></div>
  <div class="hwd-module latest-audio"></div>
  <div style="clear:both;"></div>
</div>
</div>

<style>
  #middle-cont {
    padding: 18px 0px;
    margin-top: 20px;
    margin-right: -40px;
    margin-left: -40px;
}
#bot-r, #bot-c, #bot-l {
    width: 32%;
    height: auto;
    float: right;
    padding: 5px;
}    
</style>

Well, it clears the floats, as usual. Read the [documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/clear). — Frédéric Hamidi, Oct 28 '14 at 09:13
But it does have no dimensions. According to [W3Schools](http://www.w3schools.com/cssref/pr_class_clear.asp), no floating elements are allowed on its right or left side. But, does this element exist on page to have the effect (it has no width or height)? — Mehdi Haghgoo, Oct 28 '14 at 09:22
It doensn't have a width or height, the only function is to clear a floating elements that are above it to avoid divs positions being messed up — Chun, Oct 28 '14 at 09:25
answer to [what is the use of style="clear:both"?](http://stackoverflow.com/questions/1012131/what-is-the-use-of-style-clearboth) says clear:both makes the element drop below any floated elements that precede it in the document. My question is what is the use of dropping a nonexistent element below previous one? — Mehdi Haghgoo, Oct 28 '14 at 09:25
A div that has `float:left;` or `float:right;` on its CSS to be aligned at the left or right — Chun, Oct 28 '14 at 09:32

Satwik Nadkarny · Accepted Answer · 2014-10-28T10:01:30.720

Clear:both

is used to clear any (or for that matter, all preceding) floats.

It basically means "No floating elements allowed on either the left or the right side".

Let us try to understand this with a demonstration :

You can see a couple of examples below:

No clear -> http://jsfiddle.net/0xthns3k/

The html and css are as follows :

HTML :

<div class="left">
</div>
<div class="right">    
</div>
<!-- No clear -->
<div class="Green"></div>

CSS :

div {
    display:inline-block;
    width: 150px;
    height:150px;
}

.left {
    background-color:Orange;
    float:left;
}

.right {
    background-color:Red;
    float:right;
}

.Green {
    background-color:Green;
}

.yellow {
    background-color:yellow;
    width:30px;
}

This is the image of the generated HTML.

No clear

If you see here, the green colored box is placed somewhat in the center of the two floated elements. Well, actually since there are floated elements the new "non-floated" element is actually placed adjacent to the leftmost floated element. Hence, you see the green colored element just adjacent to the leftmost floated element.

Now, if you were to have another element(s) floated left, this would automatically fit between the Orange and the Green elements.

See this below :

another left floated element

http://jsfiddle.net/0xthns3k/1/

Also, the position of this 'new' left floated element wouldn't be that important too with respect to the said HTML.

Placed below green element

<div class="left">
</div>
<div class="right">    
</div>
<!-- No clear -->
<div class="Green"></div>
<div class="left yellow">
</div>

Placed after right floated element.

<div class="left">
</div>
<div class="right">    
</div>
<div class="left yellow">
</div>
<!-- No clear -->
<div class="Green"></div>

Placed after left floated element

<div class="left">
</div>
<div class="left yellow">
</div>
<div class="right">    
</div>
<!-- No clear -->
<div class="Green"></div>

All the above HTML code would generated the same HTML as shown in the image above.

With clear -> http://jsfiddle.net/bk3p160d/

The HTML is only slightly modified here :

HTML

<div class="left">
</div>
<div class="right">    
</div>
<div class="clearAll"></div>
<div class="Green"></div>

and one additional CSS class :

CSS

.clearAll {
    clear:both;
}

Clear

If you see here, the green colored element is positioned below the line containing the aforementioned floats. This is because "clear: both" tells the HTML rendering engine "No floating elements allowed on either the left or the right side". Hence, it cannot place this element on the same line as it would violate the defination. This causes the engine to place it on a new line. On the line the preceding float properties are essentially nullified. Hence, clear:both is used to effectively clear any preceding floats.

See here for further information : http://www.w3schools.com/cssref/pr_class_clear.asp

Hope this helps!!!

Will your third div have the same effect if it had no height and width? — Mehdi Haghgoo, Oct 28 '14 at 09:50
@misaq It would have the same effect as long as it is occupying any space on the rendered HTML. — Satwik Nadkarny, Oct 28 '14 at 09:59

what is the use of this div tag with only clear rule

1 Answers1