Join Morten Rand-Hendriksen for an in-depth discussion in this video Using the clearfix, part of Making Sense of the CSS Box Model.
- View Offline
- We can't talk about floating and clearing…without talking about the Clearfix.…This requires a bit of background.…Let's say you have a box and within that box…you have another two boxes, each filled with content.…When all the boxes are displayed as normal,…the browser understands that the size of the…containing box must be at least the size of the…two contained boxes combined.…The problem arises when we float the contained boxes.…When a box is floated, the browser is no longer…able to automatically determine the height of the…contained boxes.…
As a result, the containing box collapses down to…the height of whatever non-floated content it contains.…This is a point of endless strife for new web designers…and unless you know what's going on,…it can be quite frustrating.…So let's pick the problem apart…and find a workable solution.…What's happening here is that the floated boxes…are taken out of the normal flow of the content and…for this reason, the containing box no longer has…a height reference for the floated content.…
He covers techniques such as styling text and images, floating content, using display properties, and positioning elements. He'll also show you how to take your website beyond boxes with advanced CSS tools and techniques. Each lesson is supported by real-world demonstrations of the concepts in action, and Morten closes with a "nightcap" that will get you thinking about going further with CSS.