Bummer! This is just a preview. You need to be signed in with a Basic account to view the entire video.

Preview

Start a free Basic trial
to watch this video

Sign up for Treehouse

How Floats Work

1: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.

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.
  • 0:00

    [MUSIC]

  • 0:04

    Floats are a commonly used tool in CSS layout and

  • 0:07

    one of the most popular layout methods in web design.

  • 0:10

    To understand the concept and origin of floats, you can refer to print design

  • 0:14

    where images and graphics are often laid out on a page and text flows around them.

  • 0:20

    Floats are similar to the inline block method you learned in

  • 0:22

    the previous section.

  • 0:23

    You can layout elements side by side to create

  • 0:26

    horizontal navigation menus and columns.

  • 0:28

    The biggest difference between floats and

  • 0:31

    inline blocks is that floated elements are taken out of the normal document flow,

  • 0:36

    and content flows, or wraps alongside them.

  • 0:39

    By default,

  • 0:40

    browsers display elements in the order they appear in the HTML source code.

  • 0:44

    This order is called the normal document flow.

  • 0:48

    When elements are in the normal flow of an HTML document, they are formatted as

  • 0:52

    either block or inline so they appear stacked on top of each other.

  • 0:56

    Or on the same line as the content and elements beside them.

  • 1:01

    But you can change the normal document flow with floats.

  • 1:04

    When you apply a float to an element, the element gets taken out of the normal

  • 1:08

    document flow and shifted to the left or right side of its container.

  • 1:13

    Any content next to the float flows or wraps around its left or right side.

  • 1:18

    Designers and developers who are just learning about the float property

  • 1:21

    are often confused by some of its weird behavior.

  • 1:24

    In this section, I'll teach you the basics and also teach you how to overcome

  • 1:28

    the most common problems you'll run into when using floats.

You need to sign up for Treehouse in order to download course files.

Sign up