What does "both" mean in <div style="clear:both">

Question

<div style="float:left">Hello</div>
<div style="float:right">Howdy dere pardner</div>
<div style="clear:both"></div>

I get what it does, but why the name both ? What does both mean ?

Answer 1

Both means "every item in a set of two things". The two things being "left" and "right"

Answer 2

Description of the possible values:

• left : No floating elements allowed on the left side
• right : No floating elements allowed on the right side
• both : No floating elements allowed on either the left or the right side
• none : Default. Allows floating elements on both sides
• inherit : Specifies that the value of the clear property should be inherited from the parent element

Source: w3schools.com

Answer 3

Clear:both gives you that space between them.

For example your code:

  <div style="float:left">Hello</div>
  <div style="float:right">Howdy dere pardner</div>

Will currently display as :

Hello  ...................   Howdy dere pardner

If you add the following to above snippet,

  <div style="clear:both"></div>

In between them it will display as:

Hello ................ 
                       Howdy dere pardner

giving you that space between hello and Howdy dere pardner.

Js fiiddle http://jsfiddle.net/Qk5vR/1/