1
00:00:01,000 --> 00:00:03,990
Any discussion on positioning elements would be incomplete without

2
00:00:04,000 --> 00:00:04,990
mentioning floating.

3
00:00:05,000 --> 00:00:09,990
Floating is by far the most popular CSS layout technique;

4
00:00:10,000 --> 00:00:13,990
however, it's also one that many new web designers struggle with.

5
00:00:14,000 --> 00:00:18,990
That's because how the technique works changes based upon the relationship of

6
00:00:19,000 --> 00:00:19,990
the elements that are being floated.

7
00:00:20,000 --> 00:00:24,990
Let's take a closer look at floating and how it works. So, what's a float?

8
00:00:25,000 --> 00:00:28,990
Essentially, it's an element that is shifted to the right or the left of

9
00:00:29,000 --> 00:00:29,990
it's current position.

10
00:00:30,000 --> 00:00:33,990
You assign floating, logically enough, by using the float property.

11
00:00:34,000 --> 00:00:38,990
You can use the left, right, or none keywords to define the direction of the float.

12
00:00:39,000 --> 00:00:40,990
Here is how it works.

13
00:00:41,000 --> 00:00:46,990
Remember that in normal document flow, block-level elements simply stack one on top of another.

14
00:00:47,000 --> 00:00:49,990
They are commonly refer to as boxes, and that's actually really good way of

15
00:00:50,000 --> 00:00:51,990
thinking about them.

16
00:00:52,000 --> 00:00:55,990
When you float an element, it moves as far over as it can, either it to the

17
00:00:56,000 --> 00:00:58,990
right or the left, depending upon the property that's been assigned to it.

18
00:00:59,000 --> 00:01:02,990
The elements below it then move up to occupy the space that the floated

19
00:01:03,000 --> 00:01:04,990
element used to occupy.

20
00:01:05,000 --> 00:01:08,990
In that sense, floating an element removes it from normal document flow.

21
00:01:09,000 --> 00:01:11,990
As you can see, floating an element to the right and then allowing the

22
00:01:12,000 --> 00:01:15,990
content below it to move up beside it, it's pretty easy way to create a two-column layout.

23
00:01:16,000 --> 00:01:19,990
But you can probably guess, there is a lot more to floats than just this.

24
00:01:20,000 --> 00:01:23,990
For example, let's take a look at what happens when you float an element to the left.

25
00:01:24,000 --> 00:01:27,990
Now, the default element alignment is to the left edge of their containing

26
00:01:28,000 --> 00:01:31,990
element, so if you float one of those top boxes to the left, it doesn't

27
00:01:32,000 --> 00:01:32,990
appear to move it all,

28
00:01:33,000 --> 00:01:34,990
since it's already aligned to the left of the page.

29
00:01:35,000 --> 00:01:37,990
However, it's still removed from normal document flow.

30
00:01:38,000 --> 00:01:43,990
And that means, the element below it would move up to occupy what they see as empty space.

31
00:01:44,000 --> 00:01:47,990
The result? Well, those elements would actually go underneath to floated element,

32
00:01:48,000 --> 00:01:52,990
at least partially. You see, individual parts of an element will react differently

33
00:01:53,000 --> 00:01:53,990
to floated elements.

34
00:01:54,000 --> 00:01:56,990
To best demonstrate this, let's take a look at another example.

35
00:01:57,000 --> 00:02:00,990
Let's say we have an image contained within a paragraph.

36
00:02:01,000 --> 00:02:05,990
If you were to float the image to the left, it looks as if the paragraph is

37
00:02:06,000 --> 00:02:09,990
wrapping around the image instead of going underneath it, kind of weird.

38
00:02:10,000 --> 00:02:12,990
The truth is, what we are seeing here is how those inline boxes, or those lines of

39
00:02:13,000 --> 00:02:14,990
text, react to floated elements.

40
00:02:15,000 --> 00:02:18,990
Inline boxes, such as the lines of text within a paragraph, will wrap around

41
00:02:19,000 --> 00:02:20,990
floated elements if they have enough room.

42
00:02:21,000 --> 00:02:24,990
Now, if the paragraph had a background color, you would still see that the

43
00:02:25,000 --> 00:02:28,990
paragraph itself did indeed move up and underneath the image.

44
00:02:29,000 --> 00:02:32,990
Once you have learned the ins and outs of floats, you can do all kinds of

45
00:02:33,000 --> 00:02:33,990
cool things with them.

46
00:02:34,000 --> 00:02:37,990
For example, if you float a series of elements to the same side, like these

47
00:02:38,000 --> 00:02:40,990
series of boxes that have all been floated to the left, you end up with the

48
00:02:41,000 --> 00:02:42,990
horizontal display of elements.

49
00:02:43,000 --> 00:02:46,990
This technique is used frequently to transform a list of links into a

50
00:02:47,000 --> 00:02:48,990
horizontal menu, for example.

51
00:02:49,000 --> 00:02:52,990
You can also use floats to create multiple columns of elements, drop caps in

52
00:02:53,000 --> 00:02:57,990
paragraphs, pull quotes that have text wrapped around them, product description

53
00:02:58,000 --> 00:02:59,990
details, and a whole lot more.

54
00:03:00,000 --> 00:03:03,990
I also want to make sure that we talk about clearing floats.

55
00:03:04,000 --> 00:03:07,990
And if you remember from earlier, I discussed how floated elements affect all

56
00:03:08,000 --> 00:03:09,990
the elements below it in normal flow.

57
00:03:10,000 --> 00:03:11,990
At times, that's less than ideal.

58
00:03:12,000 --> 00:03:16,990
You might, for example, create a two-column layout by floating one containing

59
00:03:17,000 --> 00:03:19,990
element to the left and one to the right,

60
00:03:20,000 --> 00:03:22,990
as you see here. So we have got this content element floated to the right, we

61
00:03:23,000 --> 00:03:25,990
have the sidebar element floated to left.

62
00:03:26,000 --> 00:03:29,990
However, based on the way floats work, any remaining content on the page, like our

63
00:03:30,000 --> 00:03:32,990
footer here, would move up an underneath the floated elements.

64
00:03:33,000 --> 00:03:37,990
By using the clear property, you can tell the browser to stop floating elements

65
00:03:38,000 --> 00:03:40,990
and go back to normal document flow.

66
00:03:41,000 --> 00:03:44,990
The clear property can be set to prevent elements from floating to the left or right

67
00:03:45,000 --> 00:03:46,990
of an element, or set to both.

68
00:03:47,000 --> 00:03:50,990
So you can use the left, right, or both values to prevent any float from

69
00:03:51,000 --> 00:03:52,990
affecting the cleared element.

70
00:03:53,000 --> 00:03:55,990
The best way to think of clearing is just think of it as your way of telling the

71
00:03:56,000 --> 00:03:58,990
browser, hey, thanks, but I need to start going back to stacking elements again.

72
00:03:59,000 --> 00:04:03,990
Now, obviously mastering how browsers handle floated elements requires a

73
00:04:04,000 --> 00:04:04,990
little bit of time.

74
00:04:05,000 --> 00:04:07,990
You will need to become comfortable with how floated elements affect their

75
00:04:08,000 --> 00:04:13,990
parent elements, how clearing works, how margins work with floated elements, and

76
00:04:14,000 --> 00:04:16,990
how the width of parent elements can impact the behavior of floated elements--

77
00:04:17,000 --> 00:04:19,990
for example, making them break down to the right or left, instead of

78
00:04:20,000 --> 00:04:20,990
floating up beside them.

79
00:04:21,000 --> 00:04:25,990
You will then need to take that a bit further and explore the best practices

80
00:04:26,000 --> 00:04:28,990
that have evolved over the years regarding using floats for layout.

81
00:04:29,000 --> 00:04:32,990
Now, the good news about that is that a fair amount of ground has already

82
00:04:33,000 --> 00:04:33,990
been covered for you.

83
00:04:34,000 --> 00:04:38,990
Floats are by far the most popular CSS layout technique currently in use, so

84
00:04:39,000 --> 00:04:42,990
there are plenty of examples in tutorials out there for you to learn from,

85
00:04:43,000 --> 00:04:53,000
including many of the CSS titles here in the lynda.com Online Training Library.