Join Morten Rand-Hendriksen for an in-depth discussion in this video Using the clearfix, part of Making Sense of the CSS Box Model.
- [Instructor] 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 …
- Designing with boxes
- The origin of the box in typography
- What is the CSS box model?
- Changing the contents within the box
- Floating and clearing content
- Using the clearfix
- Working with Float, Flex, and Grid
- CSS shapes