Chapter 5: Layouts
CSS layouts have come a long way in the last decade. In an earlier era of the Web, we wrestled and wrangled <div> tags or used heavy CSS frameworks that relied on floats and clearing. Or we threw a bunch of JavaScript at them. These days, it’s much easier to create the kinds of complex layouts that used to require nested elements, extensive knowledge of browser quirks, or expensive DOM operations.
In this chapter, we’ll look at several aspects of CSS layout. In the first half, we’ll review some of the basics: normal flow, floated elements, and how to clear floats. We’ll follow that up with refreshers on both the box model and stacking context. Understanding these concepts helps us diagnose and fix layout bugs.
In the second ...
Become an O’Reilly member and get unlimited access to this title plus top books and audiobooks from O’Reilly and nearly 200 top publishers, thousands of courses curated by job role, 150+ live events each month,
and much more.
Read now
Unlock full access