Why is used after multiple floating DIVS in a container DIV?

Question

I have encountered a <div class="clear"></div> at many places, but I am not aware why is it done? Can someone brief me on this, why it is used in css? This is the CSS:

div.clear {
    clear:both;
}

Answer 1

The height of an element is determined by its child elements (unless it is explicitly set). E.g.:

+------A------+
|+-----------+|
||     B     ||
|+-----------+|
|+-----------+|
||     C     ||
|+-----------+|
+-------------+

The height of A is determined by where the lower border of its child C is.

Now, floating elements do not count towards the height of their parents, they're taken out of the regular flow:

+------A------+
+--+---------++
   |    B    |
   +---------+
   +---------+
   |    C    |
   +---------+

The A element is collapsed to a minimal height, because its two children are floated.

Clearing elements are introduced to restore the correct height:

+------A------+
|  +---------+|
|  |    B    ||
|  +---------+|
|  +---------+|
|  |    C    ||
|  +---------+|
|+-----D-----+|
+-------------+

The D element is a zero-height element with the clear attribute set. That causes it to fall below the floated elements (it clears them). That causes A to have a regular child element to calculate its height by. That's the most typical use case at least.

The often better solution to introducing extra HTML elements is to set A to overflow: hidden though. That has the effect of forcing a height calculation, which has the same effect of growing the height to the desired size. This solution may or may not have other side effects though.

Answer 2

It is to clear out floating styles.

clear: http://www.w3.org/wiki/CSS/Properties/clear

float: http://www.w3.org/wiki/CSS/Properties/float

Answer 3

To sum it up, it's like telling the browser to not allow anything (i.e., any element be it a div, span, anchor, table etc) either on the left or on the right of the previous element. This will make the next element move to the next line.

Answer 4

Good explaination by deceze. But <div class="clear"></div> is old method and unprofessional try using

#anyelement:after {
  display: block;
  content: ".";
  clear: both;
  font-size: 0;
  line-height: 0;
  height: 0;
  overflow: hidden;
}

Just keep adding other elements which needs to cleared like #firstlement:after, .secondelement:after and so on.

Answer 5

The Most common problems we face when we write the code with float based layouts is that the parent div container doesn't expand to the height of the child floating elements. The typical solution to fix this is by adding an element with clear float after the floating elements or adding a clearfix to the parent div.

I am giving you some two good examples for better understanding about clearing floats :-

http://webdesignerwall.com/tutorials/css-clearing-floats-with-overflow

http://www.quirksmode.org/css/clearing.html

Answer 6

All technical details has been introduced above. More generally this kind of element serves as 'hard line' for floated elements, laying them properly vertically one under another. It's worth to say that there are better methods these days.