Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Start a free Courses trial
to watch this video
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.
Resources
Video review
- 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.
Related videos
[MUSIC] 0:00 Floats are a commonly used tool in CSS layout and 0:04 one of the most popular layout methods in web design. 0:07 To understand the concept and origin of floats, you can refer to print design 0:10 where images and graphics are often laid out on a page and text flows around them. 0:14 Floats are similar to the inline block method you learned in 0:20 the previous section. 0:22 You can layout elements side by side to create 0:23 horizontal navigation menus and columns. 0:26 The biggest difference between floats and 0:28 inline blocks is that floated elements are taken out of the normal document flow, 0:31 and content flows, or wraps alongside them. 0:36 By default, 0:39 browsers display elements in the order they appear in the HTML source code. 0:40 This order is called the normal document flow. 0:44 When elements are in the normal flow of an HTML document, they are formatted as 0:48 either block or inline so they appear stacked on top of each other. 0:52 Or on the same line as the content and elements beside them. 0:56 But you can change the normal document flow with floats. 1:01 When you apply a float to an element, the element gets taken out of the normal 1:04 document flow and shifted to the left or right side of its container. 1:08 Any content next to the float flows or wraps around its left or right side. 1:13 Designers and developers who are just learning about the float property 1:18 are often confused by some of its weird behavior. 1:21 In this section, I'll teach you the basics and also teach you how to overcome 1:24 the most common problems you'll run into when using floats. 1:28
You need to sign up for Treehouse in order to download course files.
Sign up