This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
How Floats Work1:31 with Guil Hernandez
Floats are similar to the inline-block method you learned in the previous section. You can layout elements side by side to create horizontal navigation menus and columns. The biggest difference between floats and inline-block is that floated elements are taken out of the normal document flow and content flows, or wraps, alongside them.
- By default, browsers display elements in the order they appear in the HTML source code. This order is called the normal document flow.
- Elements in the normal document flow are either block or inline; they appear stacked on top of each other or on the same line as the content and elements beside them.
- When you apply a float to an element, the element gets taken out of the normal document flow and shifted to the left or right side of its container.
- Any content next to the float flows -- or wraps -- around its left or right side.
You need to sign up for Treehouse in order to download course files.Sign up