CSS in Depth

Chapter 4. Making sense of floats

This chapter covers

• How floats work and how to avoid common pitfalls
• Container collapsing and the clearfix
• The media object and double container pattern
• Block formatting contexts
• How to build and understand a grid system

At the end of part 1, we covered some fundamental concepts of element sizing and spacing. Throughout part 2, we’ll build on these concepts by looking closer at the primary methods for laying out the page. We’ll look at the three most important methods to alter document flow—floats, flexbox, and grid layout. Then we’ll look at positioning, which is used primarily for stacking elements in front of one another. The flexbox and grid layouts are both new to CSS and are proving to be essential tools. ...