Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,610 --> 00:00:05,430
Now before we can actually build a float layout,
2
00:00:05,430 --> 00:00:07,010
first, we need to understand
3
00:00:07,010 --> 00:00:09,900
how the float property actually works.
4
00:00:09,900 --> 00:00:13,653
So that is going to be the goal of this lecture.
5
00:00:15,300 --> 00:00:16,560
So in this section,
6
00:00:16,560 --> 00:00:19,860
we will keep working on our blog post page
7
00:00:19,860 --> 00:00:21,910
from The Code Magazine.
8
00:00:21,910 --> 00:00:24,440
And we will use each of the three methods
9
00:00:24,440 --> 00:00:28,810
of building layouts to create a layout like this.
10
00:00:28,810 --> 00:00:30,020
So at this point,
11
00:00:30,020 --> 00:00:32,490
you see that the header here,
12
00:00:32,490 --> 00:00:35,290
which has the heading and the navigation
13
00:00:35,290 --> 00:00:38,510
now occupies basically the entire page
14
00:00:38,510 --> 00:00:40,232
from left to right.
15
00:00:40,232 --> 00:00:44,370
We have the heading and navigation side by side
16
00:00:44,370 --> 00:00:45,840
and then here below,
17
00:00:45,840 --> 00:00:50,420
we actually have now these related posts as a sidebar.
18
00:00:50,420 --> 00:00:52,820
So we have this content here on the left side
19
00:00:52,820 --> 00:00:55,060
and the side bar on the right side,
20
00:00:55,060 --> 00:00:58,370
both below this complete header.
21
00:00:58,370 --> 00:01:00,850
And then down here in the end,
22
00:01:00,850 --> 00:01:04,553
we have this footer, which again goes from left to right.
23
00:01:05,470 --> 00:01:07,450
Now here it has this weird color
24
00:01:07,450 --> 00:01:10,340
but we're gonna fix that, of course, later.
25
00:01:10,340 --> 00:01:13,400
But what matters is that this is the kind
26
00:01:13,400 --> 00:01:14,970
of very simple layout
27
00:01:14,970 --> 00:01:17,560
that we will build using float layouts,
28
00:01:17,560 --> 00:01:21,560
flexbox and CSS Grid, okay?
29
00:01:21,560 --> 00:01:24,930
But for now, in order to get started with this section,
30
00:01:24,930 --> 00:01:29,930
I will create new starter files here on my desktop.
31
00:01:30,000 --> 00:01:33,000
So since we are building on the previous section,
32
00:01:33,000 --> 00:01:34,250
I will simply go ahead
33
00:01:34,250 --> 00:01:38,173
and copy this folder and basically duplicate it here.
34
00:01:39,420 --> 00:01:44,200
And we'll then rename it to CSS-Layouts.
35
00:01:46,100 --> 00:01:49,290
But once again, just like in the previous section,
36
00:01:49,290 --> 00:01:51,090
you actually don't need to do this
37
00:01:51,090 --> 00:01:53,420
if you don't want to.
38
00:01:53,420 --> 00:01:55,850
So if you want, you can simply keep working
39
00:01:55,850 --> 00:01:59,420
in the same files, so in the same project folder
40
00:01:59,420 --> 00:02:02,090
that you have been using up until this point.
41
00:02:02,090 --> 00:02:03,370
So that's no problem.
42
00:02:03,370 --> 00:02:06,350
I'm just doing this so that later in the end,
43
00:02:06,350 --> 00:02:08,720
I have it all nicely organized
44
00:02:08,720 --> 00:02:10,890
so I can provide you with the final
45
00:02:10,890 --> 00:02:13,863
and initial files for each of the sections.
46
00:02:15,915 --> 00:02:20,870
Okay, but anyway, let's go back to Visual Studio Code
47
00:02:20,870 --> 00:02:25,870
and then here I like to right click to create a new window.
48
00:02:26,380 --> 00:02:30,750
Then open folder on the Desktop.
49
00:02:30,750 --> 00:02:32,203
This is the one that I want.
50
00:02:34,740 --> 00:02:36,060
Okay?
51
00:02:36,060 --> 00:02:39,900
And in the meantime, actually my VS Code has updated
52
00:02:39,900 --> 00:02:42,667
so it now looks a little bit different
53
00:02:43,570 --> 00:02:46,183
but that is, of course, not important.
54
00:02:47,360 --> 00:02:48,770
So what matters here
55
00:02:48,770 --> 00:02:52,573
is that our files are exactly as we left them before.
56
00:02:54,010 --> 00:02:56,210
So let's open up the relevant ones,
57
00:02:56,210 --> 00:02:57,365
close the sidebar
58
00:02:57,365 --> 00:03:01,170
and then let's go back to our live connection.
59
00:03:01,170 --> 00:03:02,920
So I click again on Go Live
60
00:03:04,230 --> 00:03:08,660
and so here is that page back.
61
00:03:08,660 --> 00:03:11,940
So again, this is exactly how we left it before
62
00:03:11,940 --> 00:03:15,483
and so this is going to be the starting point for now.
63
00:03:16,561 --> 00:03:21,233
Okay, so let's go here to the very bottom of our page.
64
00:03:24,110 --> 00:03:29,070
So here we are now starting to learn about floats,
65
00:03:29,070 --> 00:03:33,850
so I will create like a small section here in our CSS.
66
00:03:33,850 --> 00:03:37,070
And in order to actually start learning about floats,
67
00:03:37,070 --> 00:03:40,530
let's look here at this piece of our page.
68
00:03:40,530 --> 00:03:43,720
So what if we actually wanted these two elements here
69
00:03:43,720 --> 00:03:46,030
to appear side by side?
70
00:03:46,030 --> 00:03:49,060
So right now, they are not side by side
71
00:03:49,060 --> 00:03:51,410
because remember that this here
72
00:03:51,410 --> 00:03:53,280
is a paragraph element,
73
00:03:53,280 --> 00:03:56,250
which is by default a blog level element.
74
00:03:56,250 --> 00:03:59,500
And so therefore, it occupies its own line.
75
00:03:59,500 --> 00:04:01,870
So it created a line break before
76
00:04:01,870 --> 00:04:04,330
and after its element.
77
00:04:04,330 --> 00:04:08,730
Now, we could fix that by making this paragraph an inline
78
00:04:08,730 --> 00:04:10,800
or an inline block element
79
00:04:10,800 --> 00:04:13,550
but let's now actually explore another way,
80
00:04:13,550 --> 00:04:15,970
which is using gloats.
81
00:04:15,970 --> 00:04:18,930
So let's give each of these two here a class name
82
00:04:18,930 --> 00:04:22,383
in our HTML so that we can easily select them.
83
00:04:23,930 --> 00:04:26,853
So this one actually already has the id of author.
84
00:04:28,410 --> 00:04:31,763
As I mentioned before, I prefer to always use classes.
85
00:04:32,830 --> 00:04:35,480
And so I'm also giving it a class of author
86
00:04:36,510 --> 00:04:38,613
and here the class of,
87
00:04:41,660 --> 00:04:42,903
let's say author-img.
88
00:04:46,070 --> 00:04:46,903
Okay.
89
00:04:50,690 --> 00:04:53,800
And let's also add this dial
90
00:04:53,800 --> 00:04:55,943
or the selector for the author already.
91
00:04:57,510 --> 00:05:01,000
Okay, and now let's use the float property
92
00:05:01,000 --> 00:05:04,970
and in this case, we are going to set it to left.
93
00:05:04,970 --> 00:05:07,610
But here you can see a couple of different options
94
00:05:07,610 --> 00:05:12,610
for float and mainly we can use left, right or none.
95
00:05:12,760 --> 00:05:15,110
So let's use left
96
00:05:15,110 --> 00:05:17,190
and with this, what is going to happen
97
00:05:17,190 --> 00:05:19,730
is that this image is basically going
98
00:05:19,730 --> 00:05:22,670
to be taken out of the document flow,
99
00:05:22,670 --> 00:05:25,890
just like an absolutely positioned element.
100
00:05:25,890 --> 00:05:28,060
Now, the difference here with floats
101
00:05:28,060 --> 00:05:30,270
is that then all the other elements
102
00:05:30,270 --> 00:05:32,890
will basically float around it.
103
00:05:32,890 --> 00:05:36,038
So let's give it a save and see what happens
104
00:05:36,038 --> 00:05:41,038
and so here is the result of creating that flow.
105
00:05:41,260 --> 00:05:43,780
So as I said, this element here
106
00:05:43,780 --> 00:05:47,430
is now basically flowing around this one.
107
00:05:47,430 --> 00:05:49,690
And if I added a lot more text,
108
00:05:49,690 --> 00:05:51,943
then that would become even more visible.
109
00:05:53,170 --> 00:05:54,363
Let's actually do that.
110
00:05:55,360 --> 00:05:58,130
So here, let's add some more text
111
00:05:58,130 --> 00:06:01,000
and there is a nice trick in VS Code,
112
00:06:01,000 --> 00:06:03,540
which is if you start typing Lorem.
113
00:06:03,540 --> 00:06:08,150
So L-O-R-E-M, then you can hit Enter
114
00:06:08,150 --> 00:06:12,030
and this will then basically create a bunch of fake text,
115
00:06:12,030 --> 00:06:14,053
which we also call blind text.
116
00:06:15,030 --> 00:06:16,820
So let's save that
117
00:06:16,820 --> 00:06:19,630
and so now it becomes even more visible
118
00:06:19,630 --> 00:06:23,533
how this text now basically floats around this image here.
119
00:06:24,570 --> 00:06:25,403
Right?
120
00:06:26,640 --> 00:06:28,910
So this was just a test.
121
00:06:28,910 --> 00:06:32,000
Let's put it back to what it was.
122
00:06:32,000 --> 00:06:34,510
And now let's try to add some space here
123
00:06:34,510 --> 00:06:35,773
between these elements.
124
00:06:36,930 --> 00:06:39,140
So just so we see a little bit better
125
00:06:40,014 --> 00:06:42,410
what float actually does
126
00:06:42,410 --> 00:06:47,410
because now if we set like a padding-left to move it,
127
00:06:51,600 --> 00:06:53,810
let's say 10 pixels,
128
00:06:53,810 --> 00:06:55,483
then nothing actually happened.
129
00:06:56,430 --> 00:06:57,843
So let's inspect this.
130
00:07:01,290 --> 00:07:05,600
And so you see here in this overlay,
131
00:07:05,600 --> 00:07:07,880
let's make it a bit more obvious,
132
00:07:07,880 --> 00:07:10,270
so here we can very clearly see
133
00:07:10,270 --> 00:07:14,520
that the element itself actually does not start right here
134
00:07:14,520 --> 00:07:15,940
where this text is
135
00:07:15,940 --> 00:07:20,350
but it does, in fact, start right behind the image
136
00:07:20,350 --> 00:07:24,410
and so that's why adding like these 10 pixels of padding,
137
00:07:24,410 --> 00:07:26,690
which is actually marked in green,
138
00:07:26,690 --> 00:07:28,830
if you look closely there on the left,
139
00:07:28,830 --> 00:07:30,690
doesn't change a lot.
140
00:07:30,690 --> 00:07:32,880
Well, actually, it doesn't change anything.
141
00:07:32,880 --> 00:07:36,720
So let's put a bit more here, like 50
142
00:07:36,720 --> 00:07:39,210
and still, nothing changed
143
00:07:39,210 --> 00:07:42,120
because the element is still behind the image.
144
00:07:42,120 --> 00:07:44,770
So we would have to add a lot more.
145
00:07:44,770 --> 00:07:47,340
Let's say like 80 pixels
146
00:07:47,340 --> 00:07:49,430
and only now it is finally enough
147
00:07:49,430 --> 00:07:53,070
to start moving out behind that image.
148
00:07:53,070 --> 00:07:56,080
So here we could again confirm that this image
149
00:07:56,080 --> 00:07:59,640
has been taken completely out of the page's flow.
150
00:07:59,640 --> 00:08:03,110
It is as if the image isn't even on the page.
151
00:08:03,110 --> 00:08:03,943
Right?
152
00:08:03,943 --> 00:08:06,380
It does not really affect the surrounding elements.
153
00:08:07,612 --> 00:08:10,120
Now let's just, before we continue,
154
00:08:10,120 --> 00:08:12,743
add some padding on the top here as well.
155
00:08:15,000 --> 00:08:16,303
Let's say 10 pixels.
156
00:08:17,530 --> 00:08:18,970
All right?
157
00:08:18,970 --> 00:08:22,680
And now let me show you how we can actually fix the fact
158
00:08:22,680 --> 00:08:26,100
that this p element basically starts right
159
00:08:26,100 --> 00:08:28,060
at the beginning of the container.
160
00:08:28,060 --> 00:08:29,563
So behind the image.
161
00:08:30,970 --> 00:08:35,293
So what we can do is to float this element as well.
162
00:08:37,340 --> 00:08:39,410
So let's also float it on the left
163
00:08:40,690 --> 00:08:44,060
and so now let's check that out again
164
00:08:44,060 --> 00:08:48,810
and now the element starts right after the floated image.
165
00:08:48,810 --> 00:08:50,110
All right?
166
00:08:50,110 --> 00:08:52,910
So this all looks a big weird probably
167
00:08:52,910 --> 00:08:54,610
and it sounds a bit weird
168
00:08:54,610 --> 00:08:57,490
but this is just how floats work.
169
00:08:57,490 --> 00:08:58,680
Okay?
170
00:08:58,680 --> 00:09:01,750
We could also set it to right here
171
00:09:01,750 --> 00:09:04,530
and then it would move all the way to the right side
172
00:09:04,530 --> 00:09:06,340
of the container.
173
00:09:06,340 --> 00:09:07,523
So just like this.
174
00:09:08,600 --> 00:09:11,960
But once again, we now actually have more modern ways
175
00:09:11,960 --> 00:09:13,710
of doing all of this
176
00:09:13,710 --> 00:09:17,490
and in particular, flexbox and CSS Grid.
177
00:09:17,490 --> 00:09:19,720
But still, I believe that it's important
178
00:09:19,720 --> 00:09:23,373
that you get the basic knowledge about how floats work.
179
00:09:25,450 --> 00:09:28,370
Okay, so let's put it back to left
180
00:09:28,370 --> 00:09:30,580
and now here let's take this out
181
00:09:31,740 --> 00:09:34,040
and let's simply add some margin to the left
182
00:09:34,910 --> 00:09:37,773
because now that is going to be possible again.
183
00:09:41,410 --> 00:09:42,600
Okay?
184
00:09:42,600 --> 00:09:45,750
And so now this looks nicely laid out.
185
00:09:45,750 --> 00:09:47,270
So it's as if this
186
00:09:47,270 --> 00:09:52,080
was a very, very small component layout right here.
187
00:09:52,080 --> 00:09:54,450
Now, in order to create some space here
188
00:09:54,450 --> 00:09:56,550
between this image,
189
00:09:56,550 --> 00:09:58,990
so basically this part here and the image,
190
00:09:58,990 --> 00:10:00,910
how could we do that?
191
00:10:00,910 --> 00:10:04,440
Well, let's try to add some margin-bottom to this image,
192
00:10:04,440 --> 00:10:05,973
just to see what happens.
193
00:10:07,360 --> 00:10:11,143
So margin-bottom of 20 pixels.
194
00:10:12,500 --> 00:10:15,020
And so you see that a floated element
195
00:10:15,020 --> 00:10:18,860
is still able to create some margins around it.
196
00:10:18,860 --> 00:10:20,210
All right?
197
00:10:20,210 --> 00:10:24,230
So actually here we should also use margin
198
00:10:24,230 --> 00:10:26,090
and not padding
199
00:10:27,520 --> 00:10:31,240
because what we want is basically space outside
200
00:10:31,240 --> 00:10:32,840
of the element.
201
00:10:32,840 --> 00:10:34,550
Let's just move this here down
202
00:10:34,550 --> 00:10:35,760
and in order to do that,
203
00:10:35,760 --> 00:10:37,963
I actually used a nice shortcut.
204
00:10:39,230 --> 00:10:43,000
So that is here in selection,
205
00:10:43,000 --> 00:10:43,940
which is this one.
206
00:10:43,940 --> 00:10:47,140
So move line up or move line down,
207
00:10:47,140 --> 00:10:52,010
which in my case is Alt or Option + arrow key down.
208
00:10:52,010 --> 00:10:54,260
So this is an extremely handy shortcut
209
00:10:54,260 --> 00:10:56,200
that I actually use all the time
210
00:10:56,200 --> 00:10:58,570
in order to move some code around.
211
00:10:58,570 --> 00:11:02,820
So again, I can just hit Option + up or Option + down
212
00:11:02,820 --> 00:11:05,143
to move it up and down like this.
213
00:11:06,610 --> 00:11:07,443
All right.
214
00:11:08,350 --> 00:11:11,260
So this is the basic functionality of float,
215
00:11:11,260 --> 00:11:13,020
which is kind of weird
216
00:11:13,020 --> 00:11:17,210
but let's make it even weirder and now add some floats
217
00:11:17,210 --> 00:11:19,430
to our elements here.
218
00:11:19,430 --> 00:11:22,953
So to this h1, and to this navigation here.
219
00:11:24,190 --> 00:11:27,690
Now, we could do that in the elements
220
00:11:27,690 --> 00:11:29,720
that we already selected.
221
00:11:29,720 --> 00:11:34,270
So h1 here and then here in the nav
222
00:11:34,270 --> 00:11:37,230
but actually let's select them again
223
00:11:37,230 --> 00:11:38,630
because later on,
224
00:11:38,630 --> 00:11:42,830
I will then want to get rid of this new code,
225
00:11:42,830 --> 00:11:45,440
when we leave floats behind.
226
00:11:45,440 --> 00:11:46,290
Okay?
227
00:11:46,290 --> 00:11:49,490
And selecting these elements again and again
228
00:11:49,490 --> 00:11:51,440
is, of course, not a problem.
229
00:11:51,440 --> 00:11:53,530
So we can just select them multiple times
230
00:11:53,530 --> 00:11:57,200
and then all of the properties will simply be applied.
231
00:11:57,200 --> 00:11:58,730
So what I want to do here
232
00:11:58,730 --> 00:12:03,730
is have this float to the left side
233
00:12:04,087 --> 00:12:07,750
and then the nav to the right side.
234
00:12:07,750 --> 00:12:11,650
So the goal is basically to have them both on the same line
235
00:12:11,650 --> 00:12:14,040
and have each of them float to one side
236
00:12:15,450 --> 00:12:18,314
because that will then create an interesting phenomena
237
00:12:18,314 --> 00:12:19,763
that I want to explain you.
238
00:12:20,800 --> 00:12:24,260
So float: right
239
00:12:25,420 --> 00:12:27,253
and let's see what happens.
240
00:12:28,140 --> 00:12:30,960
Well, this is not what I was expecting
241
00:12:30,960 --> 00:12:34,290
because the nav is not all the way to the right.
242
00:12:34,290 --> 00:12:37,030
So let's debug this here a little bit.
243
00:12:37,030 --> 00:12:39,100
And oh well, in this case,
244
00:12:39,100 --> 00:12:40,900
it's actually very simple.
245
00:12:40,900 --> 00:12:43,255
Here it is not h2, of course,
246
00:12:43,255 --> 00:12:45,320
so I was distracted,
247
00:12:45,320 --> 00:12:46,563
it is instead nav.
248
00:12:48,430 --> 00:12:51,630
Okay, and now it's more on the right side
249
00:12:51,630 --> 00:12:54,500
and if we open up,
250
00:12:54,500 --> 00:12:58,440
well, actually, it doesn't change anything for now.
251
00:12:58,440 --> 00:13:00,870
But what matters is that this here is now floated
252
00:13:00,870 --> 00:13:02,270
to the right side
253
00:13:02,270 --> 00:13:04,750
and this one to the left side.
254
00:13:04,750 --> 00:13:07,120
Now, the interesting thing that's happening
255
00:13:07,120 --> 00:13:09,060
and that I wanted to show you
256
00:13:09,060 --> 00:13:12,660
is if you notice this gray background here
257
00:13:12,660 --> 00:13:14,993
and maybe we can make it a bit more obvious,
258
00:13:16,460 --> 00:13:20,093
so this header, let's change this here quickly to red.
259
00:13:21,180 --> 00:13:24,610
And so now what we can see here is that this element kind
260
00:13:24,610 --> 00:13:26,760
of lost it height.
261
00:13:26,760 --> 00:13:28,670
So it looks very weird.
262
00:13:28,670 --> 00:13:32,270
In fact, the only reason why it is still visible
263
00:13:32,270 --> 00:13:34,970
is because we have some padding here.
264
00:13:34,970 --> 00:13:36,820
So if we remove the padding,
265
00:13:36,820 --> 00:13:40,000
then this element would disappear completely.
266
00:13:40,000 --> 00:13:42,770
So at least the background color behind it.
267
00:13:42,770 --> 00:13:45,410
So why is this happening?
268
00:13:45,410 --> 00:13:49,550
Well, the reason is that all of its child elements,
269
00:13:49,550 --> 00:13:51,683
which are, in this case, only two,
270
00:13:53,246 --> 00:13:56,070
so the header only has two child elements.
271
00:13:56,070 --> 00:13:57,937
The h1 and the nav
272
00:13:57,937 --> 00:14:00,910
and right now, all of them are floated.
273
00:14:00,910 --> 00:14:03,930
This means that it's as if these elements
274
00:14:03,930 --> 00:14:06,220
would not even be on the page.
275
00:14:06,220 --> 00:14:08,510
So as if they had been removed.
276
00:14:08,510 --> 00:14:12,920
And so now, the element basically has no content anymore
277
00:14:12,920 --> 00:14:15,320
and so that way it makes sense
278
00:14:15,320 --> 00:14:18,610
that its height is actually zero.
279
00:14:18,610 --> 00:14:22,300
So again, the height is now as if it was zero.
280
00:14:22,300 --> 00:14:23,890
The only remaining space
281
00:14:23,890 --> 00:14:27,603
that is remaining is because of the padding.
282
00:14:28,570 --> 00:14:32,490
And if we come down here to the box model, we can see that.
283
00:14:32,490 --> 00:14:35,010
So the width is still 720
284
00:14:35,010 --> 00:14:38,190
but the height is indeed zero.
285
00:14:38,190 --> 00:14:42,400
And it's only this padding of 20 pixels on both sides
286
00:14:42,400 --> 00:14:45,490
that is still making this element visible.
287
00:14:45,490 --> 00:14:47,970
But otherwise, the background-color
288
00:14:47,970 --> 00:14:50,640
would completely disappear.
289
00:14:50,640 --> 00:14:54,710
So exactly what happens if we put this here,
290
00:14:54,710 --> 00:14:56,820
the first one to zero.
291
00:14:56,820 --> 00:14:57,653
Right?
292
00:14:59,530 --> 00:15:00,860
So this phenomena
293
00:15:00,860 --> 00:15:03,930
is what we call the collapsing elements
294
00:15:03,930 --> 00:15:05,240
and when this happens,
295
00:15:05,240 --> 00:15:09,090
we say that the element's height has collapsed
296
00:15:09,090 --> 00:15:11,240
and again, this did happen
297
00:15:11,240 --> 00:15:14,690
because both of its children are now floated.
298
00:15:14,690 --> 00:15:18,490
So it's as if they were not on the page anymore.
299
00:15:18,490 --> 00:15:22,320
Now, of course, we do not want that, right?
300
00:15:22,320 --> 00:15:24,560
So we still want this element here
301
00:15:24,560 --> 00:15:27,410
to have the height that it had before.
302
00:15:27,410 --> 00:15:29,370
And we can actually fix that,
303
00:15:29,370 --> 00:15:33,120
which is exactly what we will do in the next lecture.
304
00:15:33,120 --> 00:15:36,150
But for now, just to finish, let's quickly review
305
00:15:36,150 --> 00:15:38,620
how floats work and compare them
306
00:15:38,620 --> 00:15:40,163
to absolute positioning.
307
00:15:41,810 --> 00:15:45,490
Now, floats are actually not a positioning scheme
308
00:15:45,490 --> 00:15:47,520
like absolute positioning
309
00:15:47,520 --> 00:15:49,360
but they are still another way
310
00:15:49,360 --> 00:15:52,160
in which elements can be out of flow
311
00:15:52,160 --> 00:15:54,010
and so it actually makes sense
312
00:15:54,010 --> 00:15:56,960
to compare it with absolute positioning.
313
00:15:56,960 --> 00:15:59,620
So we can achieve a floating element
314
00:15:59,620 --> 00:16:02,770
by using float: left or float: right,
315
00:16:02,770 --> 00:16:04,740
just as we learned before.
316
00:16:04,740 --> 00:16:06,351
And as I was just saying,
317
00:16:06,351 --> 00:16:08,330
when an element is floated,
318
00:16:08,330 --> 00:16:11,190
it is removed out of the normal flow.
319
00:16:11,190 --> 00:16:12,760
And so in this regard,
320
00:16:12,760 --> 00:16:17,000
it is exactly the same as with absolute positioning.
321
00:16:17,000 --> 00:16:19,260
Now, what's different about floats
322
00:16:19,260 --> 00:16:22,490
is that floated elements do still have an impact
323
00:16:22,490 --> 00:16:24,510
on surrounding elements.
324
00:16:24,510 --> 00:16:26,710
So text and inline elements
325
00:16:26,710 --> 00:16:30,380
will actually wrap around the floated element
326
00:16:30,380 --> 00:16:32,750
and so again, in this regard,
327
00:16:32,750 --> 00:16:35,210
floated elements are completely different
328
00:16:35,210 --> 00:16:37,820
from absolutely positioned elements,
329
00:16:37,820 --> 00:16:39,422
which have no impact
330
00:16:39,422 --> 00:16:41,670
and are also not impacted
331
00:16:41,670 --> 00:16:44,260
by any of the surrounding elements.
332
00:16:44,260 --> 00:16:47,670
Finally, one important characteristic of floats
333
00:16:47,670 --> 00:16:49,870
is that the container element
334
00:16:49,870 --> 00:16:52,700
will simply not adjust its height
335
00:16:52,700 --> 00:16:54,580
to the floated element.
336
00:16:54,580 --> 00:16:58,240
And so this is exactly the reason why in the last example
337
00:16:58,240 --> 00:16:59,550
that we just saw,
338
00:16:59,550 --> 00:17:04,270
we saw that that container element collapsed its height.
339
00:17:04,270 --> 00:17:07,210
Now right, so I hope this quick overview
340
00:17:07,210 --> 00:17:09,740
and comparison will make it easier for you
341
00:17:09,740 --> 00:17:13,310
to understand floats and so in the next lecture,
342
00:17:13,310 --> 00:17:14,600
as I was saying,
343
00:17:14,600 --> 00:17:16,230
we will now fix that problem
344
00:17:16,230 --> 00:17:18,100
of collapsing heights.
345
00:17:18,100 --> 00:17:19,533
So see you there soon.
24549
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.