All language subtitles for 048 Clearing Floats.en_US

af Afrikaans
ak Akan
sq Albanian
am Amharic
ar Arabic
hy Armenian
az Azerbaijani
eu Basque
be Belarusian
bem Bemba
bn Bengali
bh Bihari
bs Bosnian
br Breton
bg Bulgarian
km Cambodian
ca Catalan
chr Cherokee
ny Chichewa
zh-CN Chinese (Simplified)
zh-TW Chinese (Traditional)
co Corsican
hr Croatian
cs Czech
da Danish
nl Dutch
en English
eo Esperanto
et Estonian
ee Ewe
fo Faroese
tl Filipino
fi Finnish
fr French
fy Frisian
gaa Ga
gl Galician
ka Georgian
de German
el Greek
gn Guarani
gu Gujarati
ht Haitian Creole
ha Hausa
haw Hawaiian
iw Hebrew
hi Hindi
hu Hungarian
is Icelandic
ig Igbo
id Indonesian
ia Interlingua
ga Irish
it Italian
ja Japanese
jw Javanese
kn Kannada
kk Kazakh
rw Kinyarwanda
rn Kirundi
kg Kongo
ko Korean
kri Krio (Sierra Leone)
ku Kurdish
ckb Kurdish (Soranî)
ky Kyrgyz
lo Laothian
la Latin
lv Latvian
ln Lingala
lt Lithuanian
loz Lozi
lg Luganda
ach Luo
mk Macedonian
mg Malagasy
ms Malay
ml Malayalam
mt Maltese
mi Maori
mr Marathi
mfe Mauritian Creole
mo Moldavian
mn Mongolian
sr-ME Montenegrin
ne Nepali
pcm Nigerian Pidgin
nso Northern Sotho
no Norwegian
nn Norwegian (Nynorsk)
oc Occitan
or Oriya
om Oromo
ps Pashto
fa Persian Download
pl Polish
pt-BR Portuguese (Brazil)
pt-PT Portuguese (Portugal)
pa Punjabi
qu Quechua
ro Romanian
rm Romansh
nyn Runyakitara
ru Russian
gd Scots Gaelic
sr Serbian
sh Serbo-Croatian
st Sesotho
tn Setswana
crs Seychellois Creole
sn Shona
sd Sindhi
si Sinhalese
sk Slovak
sl Slovenian
so Somali
es Spanish
es-419 Spanish (Latin American)
su Sundanese
sw Swahili
sv Swedish
tg Tajik
ta Tamil
tt Tatar
te Telugu
th Thai
ti Tigrinya
to Tonga
lua Tshiluba
tum Tumbuka
tr Turkish
tk Turkmen
tw Twi
ug Uighur
uk Ukrainian
ur Urdu
uz Uzbek
vi Vietnamese
cy Welsh
wo Wolof
xh Xhosa
yi Yiddish
yo Yoruba
zu Zulu
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.