Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,310 --> 00:00:02,810
So in this lecture,
2
00:00:02,810 --> 00:00:05,793
we will quickly learn how to clear floats.
3
00:00:07,260 --> 00:00:08,470
So in the last lecture,
4
00:00:08,470 --> 00:00:11,250
we created the problem that this red
5
00:00:11,250 --> 00:00:14,140
main header element here,
6
00:00:14,140 --> 00:00:16,060
collapsed it's height,
7
00:00:16,060 --> 00:00:17,030
which remember,
8
00:00:17,030 --> 00:00:19,760
was because all of its child elements
9
00:00:19,760 --> 00:00:21,720
are right now floated.
10
00:00:21,720 --> 00:00:22,830
Okay.
11
00:00:22,830 --> 00:00:24,800
And so in order to fix that,
12
00:00:24,800 --> 00:00:27,570
we need to know clear those floats
13
00:00:27,570 --> 00:00:29,920
and the easiest way of doing that,
14
00:00:29,920 --> 00:00:31,980
which is not the best way,
15
00:00:31,980 --> 00:00:34,360
but it is the easiest one is to simply
16
00:00:34,360 --> 00:00:37,860
add another element here to the header
17
00:00:37,860 --> 00:00:39,993
and then clear the floats from there.
18
00:00:41,910 --> 00:00:46,910
So let's add a div here with the class of clear
19
00:00:48,360 --> 00:00:50,360
and the name here doesn't really matter.
20
00:00:51,320 --> 00:00:52,153
Okay.
21
00:00:52,153 --> 00:00:54,240
And this element let's keep it empty,
22
00:00:54,240 --> 00:00:56,963
because we do not want any content in here.
23
00:00:57,840 --> 00:00:58,750
Right.
24
00:00:58,750 --> 00:01:00,190
So if we give it a save,
25
00:01:00,190 --> 00:01:02,100
there nothing changed for now,
26
00:01:02,100 --> 00:01:04,850
which again is because,
27
00:01:04,850 --> 00:01:06,980
now these two elements are floated
28
00:01:06,980 --> 00:01:08,430
and this one here is empty.
29
00:01:08,430 --> 00:01:11,500
And so it also doesn't have any effect.
30
00:01:11,500 --> 00:01:13,680
If we added some content here,
31
00:01:13,680 --> 00:01:15,170
then you see that it improved
32
00:01:15,170 --> 00:01:17,410
the situation a little bit.
33
00:01:17,410 --> 00:01:19,943
But of course, this is not what we want.
34
00:01:21,530 --> 00:01:23,010
So to visualize this,
35
00:01:23,010 --> 00:01:24,960
let's actually permanently give
36
00:01:24,960 --> 00:01:26,813
the main header or some other color.
37
00:01:32,053 --> 00:01:33,130
And the way I do that,
38
00:01:33,130 --> 00:01:34,370
is by simply declaring
39
00:01:34,370 --> 00:01:36,573
another one here afterwards.
40
00:01:37,850 --> 00:01:40,160
So the original one was this one,
41
00:01:40,160 --> 00:01:42,350
and then I can just write another one later.
42
00:01:42,350 --> 00:01:44,840
And so this one will overwrite the first one.
43
00:01:44,840 --> 00:01:46,470
So this way, later I can simply
44
00:01:46,470 --> 00:01:48,193
delete this entire line.
45
00:01:49,880 --> 00:01:50,900
Okay.
46
00:01:50,900 --> 00:01:52,720
But anyway, what I want to do now,
47
00:01:52,720 --> 00:01:53,553
is to of course,
48
00:01:53,553 --> 00:01:57,100
select that element that we just created here.
49
00:01:57,100 --> 00:01:58,973
So this one with the clear class.
50
00:02:02,150 --> 00:02:03,907
So selected like this,
51
00:02:03,907 --> 00:02:08,323
and then here we can use the clear property.
52
00:02:09,850 --> 00:02:13,710
And so in clear we can use also left, right,
53
00:02:13,710 --> 00:02:14,960
and both.
54
00:02:14,960 --> 00:02:18,490
Now, if we only wanted to clear the left floats,
55
00:02:18,490 --> 00:02:21,010
then here, we can say clear left
56
00:02:21,010 --> 00:02:22,610
and to same with right.
57
00:02:22,610 --> 00:02:23,443
But in this case,
58
00:02:23,443 --> 00:02:26,650
we have a left float and a right float.
59
00:02:26,650 --> 00:02:29,350
And so we want to clear both of them.
60
00:02:29,350 --> 00:02:31,920
And so we use both.
61
00:02:31,920 --> 00:02:34,010
And if we now save this,
62
00:02:34,010 --> 00:02:37,460
then our problem is indeed fixed.
63
00:02:37,460 --> 00:02:38,710
Correct.
64
00:02:38,710 --> 00:02:40,000
Now, back in the day,
65
00:02:40,000 --> 00:02:41,940
we used to build all our layouts
66
00:02:41,940 --> 00:02:45,100
using float properties like this.
67
00:02:45,100 --> 00:02:47,470
So imagine now that we had a row
68
00:02:47,470 --> 00:02:48,303
and in there,
69
00:02:48,303 --> 00:02:49,780
we had four columns.
70
00:02:49,780 --> 00:02:51,700
So we needed one element
71
00:02:51,700 --> 00:02:53,400
for each of these columns.
72
00:02:53,400 --> 00:02:56,440
And we had them floated all side-by-side.
73
00:02:56,440 --> 00:02:57,860
Then in that situation,
74
00:02:57,860 --> 00:02:59,573
the height of the row,
75
00:03:00,691 --> 00:03:02,800
so of the parent element of the four columns
76
00:03:02,800 --> 00:03:04,100
would collapse.
77
00:03:04,100 --> 00:03:06,280
And so then we would have to go in
78
00:03:06,280 --> 00:03:09,290
and create an empty div element like that
79
00:03:09,290 --> 00:03:11,660
in each of those situations.
80
00:03:11,660 --> 00:03:12,730
So that could happen
81
00:03:12,730 --> 00:03:15,270
like 10 or 20 times on a page.
82
00:03:15,270 --> 00:03:17,670
And so that would not be useful at all.
83
00:03:17,670 --> 00:03:18,550
Right.
84
00:03:18,550 --> 00:03:21,550
And also we didn't want to clutter up
85
00:03:21,550 --> 00:03:24,350
our HTML with all these empty divs.
86
00:03:24,350 --> 00:03:26,343
So that's just a bad practice.
87
00:03:27,220 --> 00:03:29,850
So let's actually remove this here
88
00:03:29,850 --> 00:03:32,250
and take a look at another technique
89
00:03:32,250 --> 00:03:34,070
that we can use.
90
00:03:34,070 --> 00:03:35,520
Now before I'm doing that,
91
00:03:35,520 --> 00:03:37,090
just keep again in mind,
92
00:03:37,090 --> 00:03:40,410
that building float layouts is kind of outdated.
93
00:03:40,410 --> 00:03:42,620
And so you do not need to understand
94
00:03:42,620 --> 00:03:45,520
100% how all of this works,
95
00:03:45,520 --> 00:03:47,360
especially with the clear.
96
00:03:47,360 --> 00:03:49,730
But again, I find it important
97
00:03:49,730 --> 00:03:51,570
that you have at least some idea
98
00:03:51,570 --> 00:03:54,900
of how this works and especially of this trick
99
00:03:54,900 --> 00:03:56,670
that I'm going to show you now,
100
00:03:56,670 --> 00:03:59,980
which is called the clearfix hack.
101
00:03:59,980 --> 00:04:01,520
So the clearfix hack
102
00:04:01,520 --> 00:04:04,020
is something that has been widely used
103
00:04:04,020 --> 00:04:07,560
for many, many years in the CSS community.
104
00:04:07,560 --> 00:04:08,660
And the reason for that
105
00:04:08,660 --> 00:04:10,546
is exactly to avoid having
106
00:04:10,546 --> 00:04:12,800
these kinds of empty divs,
107
00:04:12,800 --> 00:04:15,220
just like I explained to you before.
108
00:04:15,220 --> 00:04:16,450
So that's not good.
109
00:04:16,450 --> 00:04:18,450
And therefore someone came up
110
00:04:18,450 --> 00:04:20,570
with the clearfix hack.
111
00:04:20,570 --> 00:04:22,200
So the way that it works,
112
00:04:22,200 --> 00:04:23,950
is that on the element
113
00:04:23,950 --> 00:04:25,673
that has the collapsed height.
114
00:04:26,720 --> 00:04:30,010
So in this case here on this header,
115
00:04:30,010 --> 00:04:33,300
we add a class which was usually called
116
00:04:33,300 --> 00:04:34,253
clearfix.
117
00:04:35,640 --> 00:04:36,853
So just like this.
118
00:04:38,300 --> 00:04:39,133
Okay.
119
00:04:39,133 --> 00:04:41,193
So we added the clearfix class there.
120
00:04:42,532 --> 00:04:45,830
And then here in the CSS, we selected that.
121
00:04:45,830 --> 00:04:48,690
And then we used a pseudo element
122
00:04:48,690 --> 00:04:49,890
and in particular,
123
00:04:49,890 --> 00:04:51,473
the after-pseudo element.
124
00:04:52,400 --> 00:04:55,110
And remember that what this one does
125
00:04:55,110 --> 00:04:57,890
is to basically create a new element,
126
00:04:57,890 --> 00:04:59,660
which will be the less child
127
00:04:59,660 --> 00:05:01,800
element of the container.
128
00:05:01,800 --> 00:05:02,980
And so in a way,
129
00:05:02,980 --> 00:05:06,460
doing this is exactly the same as adding
130
00:05:06,460 --> 00:05:08,810
this empty div here manually.
131
00:05:08,810 --> 00:05:09,960
Right?
132
00:05:09,960 --> 00:05:13,300
Because again, what this after a pseudo element
133
00:05:13,300 --> 00:05:16,890
will do, is to insert a brand new element
134
00:05:16,890 --> 00:05:19,363
at the very end of the container,
135
00:05:20,426 --> 00:05:23,380
which in this case is this header element.
136
00:05:23,380 --> 00:05:24,640
So this one here,
137
00:05:24,640 --> 00:05:28,080
because now we added a clearfix class
138
00:05:28,080 --> 00:05:30,200
to that element as well.
139
00:05:30,200 --> 00:05:34,483
And so now we can clear the floats on this one.
140
00:05:35,920 --> 00:05:38,370
So clear both,
141
00:05:38,370 --> 00:05:41,420
but now remember two particularities
142
00:05:41,420 --> 00:05:43,990
about the after-pseudo element.
143
00:05:43,990 --> 00:05:44,940
So first of all,
144
00:05:44,940 --> 00:05:47,650
it only appears if we define something
145
00:05:47,650 --> 00:05:49,950
for the content property.
146
00:05:49,950 --> 00:05:50,783
Remember that?
147
00:05:51,970 --> 00:05:54,460
So in content, there needs to be something,
148
00:05:54,460 --> 00:05:57,542
even if it's just like empty text.
149
00:05:57,542 --> 00:05:59,673
And so this is enough.
150
00:06:00,700 --> 00:06:03,640
And then also by default, pseudo elements
151
00:06:03,640 --> 00:06:07,350
like after and before are inline elements.
152
00:06:07,350 --> 00:06:09,630
However, clearing floats like this,
153
00:06:09,630 --> 00:06:12,790
only really works on a block-level element.
154
00:06:12,790 --> 00:06:16,330
And so we set to display property on this element
155
00:06:16,330 --> 00:06:17,720
to block.
156
00:06:17,720 --> 00:06:19,080
And so with this,
157
00:06:19,080 --> 00:06:22,010
the problem should now be fixed as well.
158
00:06:22,010 --> 00:06:23,823
And indeed, there you go.
159
00:06:24,810 --> 00:06:27,300
So let's check that out quickly.
160
00:06:27,300 --> 00:06:29,470
And so here is that pseudo element
161
00:06:29,470 --> 00:06:31,470
that we've just created.
162
00:06:31,470 --> 00:06:35,760
And so now the floats are being cleared here.
163
00:06:35,760 --> 00:06:38,060
So if we were to take this off,
164
00:06:38,060 --> 00:06:40,370
then you see that the heights
165
00:06:40,370 --> 00:06:41,963
are back to being collapsed.
166
00:06:43,600 --> 00:06:45,670
Okay. And that's it.
167
00:06:45,670 --> 00:06:48,320
So this is how we would clear floats
168
00:06:48,320 --> 00:06:50,180
in float layouts.
169
00:06:50,180 --> 00:06:53,490
So again, by using this clearfix class,
170
00:06:53,490 --> 00:06:54,640
which back in the day,
171
00:06:54,640 --> 00:06:56,860
it was being used all the time
172
00:06:56,860 --> 00:06:59,970
and we called this the clearfix hack.
173
00:06:59,970 --> 00:07:02,530
All right. And so now next up,
174
00:07:02,530 --> 00:07:04,350
let's use this knowledge
175
00:07:04,350 --> 00:07:06,810
to build a very simple float layout
176
00:07:06,810 --> 00:07:10,800
in order to make our page look like this.
177
00:07:10,800 --> 00:07:14,680
So like the final demo that I have right here.
178
00:07:14,680 --> 00:07:15,620
Okay.
179
00:07:15,620 --> 00:07:18,470
So we can easily do that with floats.
180
00:07:18,470 --> 00:07:20,283
And so let's check it out now.
11669
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.