clear: both in CSS

In web design, we may have 1 header, 1 left menu bar, 1 content (right of menu) and 1 footer..
 <div id="header">Header</div>
<div id="menu">Left menu bar</div>
<div id="content">Some Content</div>
<div id="footer">Footer</div>
Normally we  use float:left  for  menu and content.
#menu, #content{
float: left;
}
Even we do not use float:left  for footer, it may stay the same row with content. 
We need to use clear: both in  footer CSS to move footer below the content and menu.
#footer{
clear: both;
}
We do not need to do this for header as the CSS after header will not impact header CSS.
clear:both syntax:
No floating elements allowed on the left or the right side of a specified paragraph: