WEBVTT

00:00:07.360 --> 00:00:11.680
In this video we're going to learn how to make elements float.

00:00:11.730 --> 00:00:21.060
Well before we start floating is a property that of elements can acquire and usually elements they float

00:00:21.190 --> 00:00:26.830
horizontally they don't float vertically so they can only floats to the left or to the right.

00:00:26.860 --> 00:00:30.770
And the only floats according to the containing elements.

00:00:30.810 --> 00:00:36.530
So if we take one of these dips they get to float relatively to the containing element which is the

00:00:36.540 --> 00:00:37.920
body element.

00:00:38.160 --> 00:00:43.980
And if you take a paragraph inside a div and you apply some fluting to that paragraph then it's going

00:00:43.980 --> 00:00:48.790
to be floating relatively to the containing div of last paragraph.

00:00:48.810 --> 00:00:55.990
OK so let's grees in your file and call it floating HMO.

00:00:57.030 --> 00:01:04.020
And we're going to copy the content from our divans file.

00:01:05.370 --> 00:01:08.350
OK let's change the title to floating.

00:01:09.270 --> 00:01:10.140
All right.

00:01:10.770 --> 00:01:21.260
So if we start with the Facebook Dev and we apply some floating the syntax is float.

00:01:21.390 --> 00:01:23.970
Make its floats to the left.

00:01:25.080 --> 00:01:25.470
OK.

00:01:25.890 --> 00:01:26.670
So what does this mean.

00:01:26.670 --> 00:01:32.750
So this means that Facebook now is going to be floating to the left relatively to the body element.

00:01:33.300 --> 00:01:34.200
That's what we've seen here.

00:01:34.200 --> 00:01:42.120
So it's going to floats as far as it's going to move as far as possible to the left of the all the elements

00:01:42.130 --> 00:01:42.530
.

00:01:42.840 --> 00:01:49.470
And the interesting thing that we notice here is does the next div which is supposed to be a block element

00:01:49.920 --> 00:01:53.450
now is sitting next to Facebook.

00:01:53.970 --> 00:01:59.640
So that's what happens when we apply fluting to assassinate elements so the way it works is the browser

00:01:59.670 --> 00:02:01.430
will read our structure here.

00:02:01.440 --> 00:02:05.190
So Facebook comes first and it needs to float to the left.

00:02:05.460 --> 00:02:08.590
So the next available space is going to be from here.

00:02:09.120 --> 00:02:15.210
And then when we come to the Apple David and the apple there is going to be sitting right after the

00:02:15.210 --> 00:02:21.210
Facebook div from there and it's going to take as much with as possible as far as it is not floating

00:02:21.210 --> 00:02:21.830
itself.

00:02:22.040 --> 00:02:22.440
OK.

00:02:22.620 --> 00:02:29.370
So if we are if we apply some fluting now to the Apple as well and we make it float to the left for

00:02:29.370 --> 00:02:32.770
instance then we see the same thing happening.

00:02:32.790 --> 00:02:39.170
So now Apple took as much space as it needs for its content over the next day.

00:02:39.180 --> 00:02:42.520
Now is sitting next to the apple trees after.

00:02:42.720 --> 00:02:52.560
So if we change that fluting to flossing right now the apple Dave is closing right.

00:02:52.560 --> 00:02:58.040
And another interesting thing here is that now Microsoft is switching between Facebook and Apple why

00:02:58.040 --> 00:02:59.670
we are seeing this.

00:02:59.670 --> 00:03:04.700
So the reason is Facebook is the first element.

00:03:05.040 --> 00:03:13.140
So its floating the left Apple is the next element which is using the rights and Microsoft that comes

00:03:13.140 --> 00:03:20.090
after that the first available space for Microsoft's is going to be from there.

00:03:20.700 --> 00:03:27.240
Microsoft is not losing elements is going to take as much space as it has got which goes from the end

00:03:27.240 --> 00:03:30.770
of the Facebook Dave to the start of the apple day.

00:03:31.380 --> 00:03:32.340
All right.

00:03:32.340 --> 00:03:33.490
So if we want to avoid that.

00:03:33.510 --> 00:03:36.050
There is a very interesting property.

00:03:36.270 --> 00:03:39.490
Its called clear.

00:03:40.190 --> 00:03:44.040
OK so if we clear Bode's So what does that mean.

00:03:44.040 --> 00:03:56.760
So that means that the Microsoft Stiv is not allowing any fluting elements on its right or left.

00:03:56.760 --> 00:04:02.250
So were not allowing any floating So Apple and Facebook are both floating elements.

00:04:02.330 --> 00:04:08.250
So since we are not allowing any floating elements around to make the Microsoft's div that Microsoft

00:04:08.250 --> 00:04:13.500
is not going to see they're going to say it's after Facebook because we're not allowing any prosing

00:04:13.500 --> 00:04:19.980
elements to the left of Microsoft's it's not going to it's just before Apple because we're not allowing

00:04:20.010 --> 00:04:22.800
any fluting elements or the rights of Microsoft's