@imemoje - the article that @toianw posted has this paragraph in it:
The Overflow Method relies on setting the overflow CSS property on a parent element. If this property is set to auto or hidden on the parent element, the parent will expand to contain the floats, effectively clearing it for succeeding elements. This method can be beautifully semantic as it may not require an additional elements. However if you find yourself adding a new div just to apply this, it is equally as non-semantic as the empty div method and less adaptable. Also bear in mind that the overflow property isn't specifically for clearing floats. Be careful not to hide content or trigger unwanted scrollbars.
<div>parent element, as the paragraph says it will expand to contain all the floats. If it isn't there, then they are all collapsed to the left, so they are there but just hidden behind the first one.
overflow:auto;is a property of the class
floatbecause I'm lacking in knowledge on this area... :)
overflow: auto;property on the parent being the way to do this... reading through it seems that there were many idea of how to accomplish this objective, but that method was a "surprise" to the author. The explanation is somewhat short on technical detail of why it works, see if you think that it seems that way to you?
.icon-bar aelements to confirm this. You can see the first one only because it has a background set on the
.activeclass. Without changing the overflow property on the parent it has no height, so you don't get the background color you expected.