The CSS Float Rules

The nine rules governing floated elements in CSS can be confusing, with some rules being more difficult to understand than others. In this tutorial, I expound on the nine rules in an effort to grant the reader—and primarily my own students—an additional perspective on floating elements in CSS.

In the examples that follow, all floating-related CSS syntax appears inline with the HTML markup that generates the floats so the reader can follow along, if he or she wishes, with the explanation of each rule.

The handheld/smartphone version of this tutorial currently only displays this and the introduction pages legibly.

A version of this tutorial for the Amazon Kindle is forthcoming from The Code Architect Publishing.

The contents of this tutorial are in working draft, as of 11 April 2012.

Errors, omissions, and suggestions should be sent to roy at the code educators period com.

— Roy Vanegas, The Code Educators
11 April 2012