This course will be retired on July 12, 2021. We recommend "Mobile-First CSS Layout" for up-to-date content.
Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
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