1
00:00:00,303 --> 00:00:06,290
Next up, we're going to discuss a CSS
positioning property called float.

2
00:00:07,590 --> 00:00:09,968
If you studied the history of CSS,

3
00:00:09,968 --> 00:00:14,530
you'd find that float has
a bit of a bad reputation.

4
00:00:14,530 --> 00:00:20,647
This traces back to when the iPhone
was launched in 2007, and users could,

5
00:00:20,647 --> 00:00:25,780
for the first time, experience
the web in full on a mobile device.

6
00:00:27,050 --> 00:00:31,574
At the time, CSS didn't offer
any properties to help develop

7
00:00:31,574 --> 00:00:36,359
responsive websites that remained
legible on a variety of screen

8
00:00:36,359 --> 00:00:39,240
sizes because the need wasn't there.

9
00:00:40,270 --> 00:00:44,513
So developers were forced to
come up with creative solutions,

10
00:00:44,513 --> 00:00:49,876
many of which involved using the float
property to create responsive content,

11
00:00:49,876 --> 00:00:52,610
even though it wasn't built to do that.

12
00:00:54,290 --> 00:00:58,636
Nowadays, CSS includes
a number of ways to approach

13
00:00:58,636 --> 00:01:04,190
responsive content,
including Flexbox and CSS Grid.

14
00:01:04,190 --> 00:01:07,335
And you'll learn those in a future course.

15
00:01:07,335 --> 00:01:12,563
In the meantime, we can return to
using float for what it's built to do,

16
00:01:12,563 --> 00:01:18,155
place content to the left or right side
and have other content wrap around it.

17
00:01:19,975 --> 00:01:22,640
Let's try out the float property.

18
00:01:22,640 --> 00:01:26,209
In Diane's paragraphs
about the CSS box model,

19
00:01:26,209 --> 00:01:30,830
she included an image from CSS
Tricks that we haven't styled.

20
00:01:31,980 --> 00:01:36,595
Let's add a class to the image in case
we'd like to later apply the same

21
00:01:36,595 --> 00:01:38,248
styles to other images.

22
00:01:43,427 --> 00:01:46,985
Now, paragraphs have
a default value of block for

23
00:01:46,985 --> 00:01:52,080
the display property, so the next
paragraph comes beneath the image.

24
00:01:53,080 --> 00:01:56,872
But what if I wanted my text
to wrap around the image?

25
00:01:56,872 --> 00:01:59,322
That's what floats are built to do.

26
00:02:12,644 --> 00:02:14,964
We could use float right instead,

27
00:02:14,964 --> 00:02:19,210
if we wanted our image placed on
the right rather than the left.

28
00:02:21,400 --> 00:02:26,770
Now, our body copy touches the image,
which is not a good look.

29
00:02:26,770 --> 00:02:32,244
Let's increase the margin on the right
side of our image, as well as the bottom,

30
00:02:32,244 --> 00:02:36,286
in case any text wrapping around
the image comes too close.

31
00:02:43,253 --> 00:02:47,612
Don't forget to think of
the margin shorthand like a clock,

32
00:02:47,612 --> 00:02:52,838
that's 0 on the top, 1 rem on the right
and bottom and none on the left.

33
00:02:52,838 --> 00:02:59,113
And since developers no longer rely on
the float property to create complex

34
00:02:59,113 --> 00:03:06,140
responsive layouts, which is a relief
since it wasn't built to do that.

35
00:03:06,140 --> 00:03:10,220
That covers the majority of what we
need to know about the float property.

36
00:03:11,670 --> 00:03:16,029
I say the majority because sometimes
you might not like the look of what you

37
00:03:16,029 --> 00:03:16,740
achieved.

38
00:03:17,850 --> 00:03:22,562
You might be saying, it's great that
the first paragraph wraps up next to

39
00:03:22,562 --> 00:03:26,830
the image, but I wish the second
paragraph would stay beneath it.

40
00:03:28,550 --> 00:03:32,884
To force an element not to wrap
next to a floated element,

41
00:03:32,884 --> 00:03:35,880
we use a CSS property called clear.

42
00:03:36,970 --> 00:03:46,066
Let's create a class called .clear,
And apply the clear property.

43
00:03:48,737 --> 00:03:52,847
The clear property accepts
values of left and right,

44
00:03:52,847 --> 00:03:55,506
but I prefer to use the value both.

45
00:03:55,506 --> 00:04:00,846
That way, it doesn't matter whether
the floated element is on the left or

46
00:04:00,846 --> 00:04:05,256
the right, or even some of both,
our clear works either way.

47
00:04:05,256 --> 00:04:07,896
Let's apply that new class to

48
00:04:07,896 --> 00:04:12,760
the paragraph that shouldn't
wrap next to our image.

49
00:04:18,436 --> 00:04:19,030
And there you have it.

50
00:04:20,520 --> 00:04:24,953
Now, if you're a curious developer,
and I hope you are,

51
00:04:24,953 --> 00:04:29,387
you might play around with
the element inspector and say,

52
00:04:29,387 --> 00:04:34,400
this doesn't look so
great at certain viewport sizes.

53
00:04:34,400 --> 00:04:37,470
Could we use CSS to
improve this experience?

54
00:04:38,510 --> 00:04:42,840
The answer is yes, and we'll take
a look at how in the next stage.