CSS floats and the overflow property

Reading this article, I was struck by the fact that it's claimed that a container hosting floats is self-cleared by the overflow property. Actually, this is not correct. Instead, it should be said that the overflow property allows the container to contain floats, provided that no actual height has been specified on it. The question is: why this happens? Usually, to achieve this goal a coder specifies overflow: hidden on the container itself. If you set a background color on the container, you will see that color stretching until it contains all floated elements. The answer to our question lies not in the overflow property itself, but in the way a browser handles floats. When you turn an element into a float, vertical space collapses. That's why without the overflow property our container is not able to contain floats, because its vertical space is collapsed due to the action of its floated children. Using the overflow property, you're actually forcing the browser to recalculate the amount of vertical space inside the container so that its height now can contain floats. Without this property, a browser still uses its default algorithms to handle vertical space during floating (this is called float damage in the Firefox's source code jargon).

Leave a Reply

Note: Only a member of this blog may post a comment.