Let's assume we have several nested DIV elements.
Also, assume we have one enclosing DIV, but inside DIVs are with style FLOATING.
<div style="clear: both; display: block; background-color: blue;">
<div style="clear: none; float: left;">some block</div>
<div style="clear: none; float: left;">some block</div>
<div style="clear: none; float: left;">some block</div>
</div>
What attracted my attention is that in IE everything works just fine (all nested DIVs have the background from its parent).
But when I opened the result in Mozilla Firefox I noted that the enclosing DIV is like for itself and no inner content.
The problem is that floated elements are taken out of the doument flow and hence do not
contribute to the height of their parent. So generally the enclosing div does not understand it has a content inside.
The solution: put an element (DIV) with style set to CLEAR: BOTH, after all the floating elements.
<div style="clear: both; display: block; background-color: blue;">
<div style="clear: none; float: left;">some block</div>
<div style="clear: none; float: left;">some block</div>
<div style="clear: none; float: left;">some block</div>
<div style="clear: both;"></div>
</div>
Interesting times for the Browser understanding of CSS ...
