1 00:00:00,600 --> 00:00:06,900 Hello and welcome to this video on see csx floor property. 2 00:00:07,170 --> 00:00:21,530 The overflow property is used to define or specify what happens to an element if it overflows its container. 3 00:00:22,040 --> 00:00:25,100 I show you an example. 4 00:00:25,110 --> 00:00:32,970 I've got my web page on the right here and my sis says an hastier male code on the left. 5 00:00:33,090 --> 00:00:34,710 This image here. 6 00:00:34,890 --> 00:00:37,670 It's an example often overflow. 7 00:00:37,780 --> 00:00:40,810 It has overflown its container. 8 00:00:40,890 --> 00:00:45,630 The image is embedded inside the container. 9 00:00:45,930 --> 00:00:50,180 And also there are text inside that container. 10 00:00:50,190 --> 00:00:54,600 This is a div that houses the image and the text. 11 00:00:54,810 --> 00:00:59,550 So as you can see the image is outside the box. 12 00:00:59,550 --> 00:01:09,900 So the Deve here I'm giving the did a border fence the blue box and is also got a whiff the style and 13 00:01:09,900 --> 00:01:11,440 the collar. 14 00:01:12,480 --> 00:01:16,400 What we are interested in here is this image here. 15 00:01:16,410 --> 00:01:20,380 We want this image to fit inside the box. 16 00:01:20,400 --> 00:01:29,130 We want to remove the overflow and the property you need to remove that overflow is called the overflow 17 00:01:29,520 --> 00:01:30,520 property. 18 00:01:30,660 --> 00:01:39,570 And there are a few values you can use with the overflow property you king specify to be visible visible 19 00:01:39,570 --> 00:01:42,470 means you can see the overflow. 20 00:01:42,690 --> 00:01:45,350 He didn't mean the overflow is hidden. 21 00:01:45,360 --> 00:01:48,170 It's cliped and the rest of the content. 22 00:01:48,180 --> 00:01:55,110 Second visible inside the container you can set the value to scroll. 23 00:01:55,130 --> 00:02:03,730 The overflow is clipped but you can see the set scroll bar so you can see the rest of the content. 24 00:02:03,750 --> 00:02:06,020 You can also set it all. 25 00:02:06,300 --> 00:02:16,260 What does is that once the overflow has been clicked be you kinks now create this cruel bar to see the 26 00:02:16,260 --> 00:02:17,540 rest of the content. 27 00:02:17,610 --> 00:02:19,700 That depends on what content you have. 28 00:02:19,700 --> 00:02:26,700 If you have lots of content that even after you've clicked the image you still can't see escrowed balis 29 00:02:26,760 --> 00:02:30,740 created nobles you to see the rest of the image. 30 00:02:30,930 --> 00:02:43,200 Sue to remove the overflow from Dave will use the overflow property and we can to use the order Valley. 31 00:02:43,590 --> 00:02:49,190 What this would do is to clip it it to contain inside the dead. 32 00:02:49,810 --> 00:02:57,690 So don't click fix here is the class which is the class are specified here so this becomes the selector 33 00:02:58,320 --> 00:03:00,060 and the property for this select. 34 00:03:00,070 --> 00:03:05,530 Here is the overflow and the value have set for the floor is all. 35 00:03:05,550 --> 00:03:14,130 So what this would do it will automatically clip the MH 42 feet into the container and then in some 36 00:03:14,150 --> 00:03:16,850 cases can create a scroll bar. 37 00:03:16,870 --> 00:03:20,990 Is there a lot of content and enables you to see the rest of the content. 38 00:03:21,150 --> 00:03:24,540 Once the image has been clipped into the container. 39 00:03:24,540 --> 00:03:26,790 So if I refresh this we'll see. 40 00:03:26,820 --> 00:03:30,150 See the image now is now inside the container. 41 00:03:30,150 --> 00:03:37,050 If I had lots of techs here are another content that you couldn't see that has hidden as cruel bice 42 00:03:37,050 --> 00:03:41,160 also created enables you to scroll and see the rest of the content. 43 00:03:41,190 --> 00:03:46,880 So this is how you would use the POTO value with the overflow. 44 00:03:47,090 --> 00:03:50,640 On the other value you can use is hidden hidden. 45 00:03:50,640 --> 00:03:59,580 Does the same thing and what he does he keeps it hides the overflow and forces it to go into the container 46 00:03:59,910 --> 00:04:05,930 so he does the same thing achieve the same objective as the gullied difference between the heading and 47 00:04:05,930 --> 00:04:07,900 it is that with the auto. 48 00:04:08,010 --> 00:04:12,570 There's lots of content after the images as being forced into the container. 49 00:04:12,840 --> 00:04:18,840 It gives me a scroll bar so you can squirrel and see the rest of the current I of value you can use 50 00:04:18,840 --> 00:04:21,870 with the overflow property is to scroll. 51 00:04:21,870 --> 00:04:25,140 So if I saved that you see what that does you see. 52 00:04:25,140 --> 00:04:29,520 So what that does is create the scroll because voila got limited content. 53 00:04:29,510 --> 00:04:32,310 If I have lots of content it creates a scroll. 54 00:04:32,310 --> 00:04:36,360 See there's really no way as you scroll down scroll sideways. 55 00:04:36,360 --> 00:04:37,530 That's what this group does. 56 00:04:37,560 --> 00:04:45,390 If it puts the overflow into the container and also creates a scroll on the vertically and horizontally 57 00:04:45,810 --> 00:04:47,950 to allow you see the rest of the content. 58 00:04:47,960 --> 00:04:58,020 Hi The Sideways of vertically are set back to hit it the most common values you would see developers 59 00:04:58,030 --> 00:04:59,940 using this over look proper. 60 00:05:00,030 --> 00:05:08,720 It is either hidden or all because they are the property values you can use we they include visible 61 00:05:09,890 --> 00:05:18,560 initial We assess the property to the default and they inherit inherit this it will inherit from the 62 00:05:18,590 --> 00:05:19,820 parent element. 63 00:05:19,850 --> 00:05:27,340 But the most common values you will see people use is higher than his or all of. 64 00:05:27,590 --> 00:05:33,700 So in this video we went through what the over property does. 65 00:05:33,920 --> 00:05:41,340 And we also went through some of the values that can be used in the overflow property. 66 00:05:41,450 --> 00:05:49,910 So the main function of Apollo property is to remove overflow from from the elements container. 67 00:05:50,330 --> 00:06:01,460 And you can use several values with it visible here in scroll so initial and inherit initial just sets 68 00:06:01,460 --> 00:06:06,560 the sets the value to high it was that is the original state. 69 00:06:06,560 --> 00:06:11,760 Before the floor was removed and then scroll enables you to scroll left. 70 00:06:11,860 --> 00:06:20,460 The rest of the content left or right it creates a scroll bar vertically and horizontally heading high. 71 00:06:20,540 --> 00:06:28,060 The overflow fits the arrests of the whole or flown element into the container. 72 00:06:28,130 --> 00:06:39,290 Visible allows you to see the overflow before any changes has occurred so visible it is in its original 73 00:06:39,290 --> 00:06:41,210 state is overflowing. 74 00:06:41,570 --> 00:06:45,330 So this is how you would use the overflow property. 75 00:06:45,650 --> 00:06:47,550 Thank you so much for watching. 76 00:06:47,570 --> 00:06:51,780 I hope the video has made sense since day care. 77 00:06:51,790 --> 00:06:52,830 Bye for now.