Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed CSS Layout!
You have completed CSS Layout!
Preview
Let's use float for what it’s built to do: place content to the left or right side, and have other content wrap around it.
Further reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Next up, we're going to discuss a CSS
positioning property called float.
0:00
If you studied the history of CSS,
0:07
you'd find that float has
a bit of a bad reputation.
0:09
This traces back to when the iPhone
was launched in 2007, and users could,
0:14
for the first time, experience
the web in full on a mobile device.
0:20
At the time, CSS didn't offer
any properties to help develop
0:27
responsive websites that remained
legible on a variety of screen
0:31
sizes because the need wasn't there.
0:36
So developers were forced to
come up with creative solutions,
0:40
many of which involved using the float
property to create responsive content,
0:44
even though it wasn't built to do that.
0:49
Nowadays, CSS includes
a number of ways to approach
0:54
responsive content,
including Flexbox and CSS Grid.
0:58
And you'll learn those in a future course.
1:04
In the meantime, we can return to
using float for what it's built to do,
1:07
place content to the left or right side
and have other content wrap around it.
1:12
Let's try out the float property.
1:19
In Diane's paragraphs
about the CSS box model,
1:22
she included an image from CSS
Tricks that we haven't styled.
1:26
Let's add a class to the image in case
we'd like to later apply the same
1:31
styles to other images.
1:36
Now, paragraphs have
a default value of block for
1:43
the display property, so the next
paragraph comes beneath the image.
1:46
But what if I wanted my text
to wrap around the image?
1:53
That's what floats are built to do.
1:56
We could use float right instead,
2:12
if we wanted our image placed on
the right rather than the left.
2:14
Now, our body copy touches the image,
which is not a good look.
2:21
Let's increase the margin on the right
side of our image, as well as the bottom,
2:26
in case any text wrapping around
the image comes too close.
2:32
Don't forget to think of
the margin shorthand like a clock,
2:43
that's 0 on the top, 1 rem on the right
and bottom and none on the left.
2:47
And since developers no longer rely on
the float property to create complex
2:52
responsive layouts, which is a relief
since it wasn't built to do that.
2:59
That covers the majority of what we
need to know about the float property.
3:06
I say the majority because sometimes
you might not like the look of what you
3:11
achieved.
3:16
You might be saying, it's great that
the first paragraph wraps up next to
3:17
the image, but I wish the second
paragraph would stay beneath it.
3:22
To force an element not to wrap
next to a floated element,
3:28
we use a CSS property called clear.
3:32
Let's create a class called .clear,
And apply the clear property.
3:36
The clear property accepts
values of left and right,
3:48
but I prefer to use the value both.
3:52
That way, it doesn't matter whether
the floated element is on the left or
3:55
the right, or even some of both,
our clear works either way.
4:00
Let's apply that new class to
4:05
the paragraph that shouldn't
wrap next to our image.
4:07
And there you have it.
4:18
Now, if you're a curious developer,
and I hope you are,
4:20
you might play around with
the element inspector and say,
4:24
this doesn't look so
great at certain viewport sizes.
4:29
Could we use CSS to
improve this experience?
4:34
The answer is yes, and we'll take
a look at how in the next stage.
4:38
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up