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. Although floats and positioning are not new, they’re often misunderstood.
In this chapter, we’ll first look at floats. They’re the oldest method for laying out a web page, and for many years were the only way. They’re a little odd, however. Making sense of floats begins with an understanding of their original purpose, which is where we’ll start. I’ll show you how to deal with some of their quirks, including a tool called a clearfix. This will put some context to their behavior.
As we go, you’ll also learn about two patterns that you might often see in page layouts: the double container pattern and the media object. To wrap up, you’ll put your knowledge to work to build a grid system, which is a versatile tool for structuring a page.