Okay, so now that we've looked at the CSS Display Property, I want to cover another CSS property that's 1
really important for layout and that is the Float. 2
And the main thing that this allows us to do is to wrap text around a particular element. 3
What exactly does this allow us to do? 4
So we've seen previously that by changing the display, we could, for example, make our blocks go 5
on to the same line. 6
So maybe there's one here and there's another inline-block here. 7
There could be another inline-block here, and we could use three inline-blocks to achieve this layout. 8
But if we wanted our text to be able to wrap around another element, such as in this case where it's 9
kind of this misshapen l, then this is going to require us to use the Float Property. 10
The web really is an extension of print. 11
Previously we used to have these newspapers, and the way we lay out images and text is kind of what 12
we've borrowed in order to create the websites that we see these days. 13
You realize very often in the world how so many things get reused in different ways and getting good 14
at a particular thing, like laying out newspapers, 15
even if this skill dies, it still usually gets transferred into something else. 16
How do we use the float property? 17
So here, let's say that we have an image tag. 18
I don't have the full content of the image or the text just so that we can save some space here and 19
understand what's going on in the CSS. 20
But you can imagine this is an image element with the source, with an alt tag, and this is a text 21
with some Lorem ipsum that's about a paragraph long and it looks something like this. In the style.css, 22
let's go ahead and target the image and make it float: left. 23
Float is the name of the property and left is the value that we're setting that property to. 24
And as soon as this CSS is applied, then what you'll see is that our text will now begin to wrap around 25
our image. 26
So it fits around the image. 27
And we've done this by making this image float to the left. 28
We're not actually setting anything on the text here. 29
We can also change that float to right to make the image go to the right of the page and for the text 30
to wrap on the left. 31
And those are probably the only two values we're going to be using on the float property. 32
Essentially, if we had a normal HTML file with respecting the normal flow, then images by default 33
have display block. 34
So they're going to take up the full width even if they don't need to. 35
And then paragraph elements also are display blocks. 36
So will take up the full width and then so on and so forth. 37
But if we wanted the text to wrap around the images, then we can simply take the image and set this 38
one to float: left and this other one to float: right. 39
And now these two elements are now taken out of the normal HTML flow and they're actually floating around 40
the text. 41
Now, sometimes, though, you might not want the text to wrap around the floated element. 42
Previously we saw if we had an image and then we had two paragraph elements, then we would want the 43
image to be floated left so that the paragraph text can flow around it. 44
However, if instead of having two paragraph elements, we actually had a footer here, then we actually 45
want the footer to be down here occupying the full width and not squished in to be wrapped around the 46
image right here. 47
So how do we achieve this? 48
Because as I mentioned, the float property is set onto the image and not onto the paragraph, whereas 49
the behavior that you can see occurs in the paragraph. 50
So the paragraph is the one that's actually wrapping around the image. In order to fix this and allow 51
the footer to be free of this floating image, then we need to use a related property which is called 52
"clear". 53
So here I've got an example where we've got an image element, a paragraph element, and finally we've 54
got a footer. 55
So normally in the footer you'll see something like copyright and then the name of the company. 56
It looks very weird having it placed here. 57
Instead we want it placed down here like any normal footer, but unfortunately because our image is 58
floated to the left, then everything else is trying to wrap around it. 59
So we have to change our CSS, we have to target the footer using the selector for that element and 60
then we have to set a property called clear. 61
And what this clear does is it clears any responsibility to wrap around things that are floating. 62
This footer is now cleared of the left float and that means it can go into its normal position and ignore 63
anything that's floating around it. 64
And this will end up looking something like this. 65
If we look at this layout of a web page here, you can see you might achieve this by having a block 66
over here, which is float: left and another section here, which is float: right, 67
and this will give us this kind of separation of these two. 68
Probably they're going to be divs, right? 69
Probably two squares. 70
And it allows them to line up side by side like this. 71
Now for the footer to be cleared of both of these. 72
So above it there's a float: left and there's something floating right that we need to set that clear 73
property to "both", and this means it's not going to wrap the thing on the right and it's not going to 74
wrap the thing on the left. 75
So now let's try an exercise and see if we can apply what we learned into writing our own code and setting 76
the float property. 77
If you download and extract the 8.1 CSS Float starting files and open up the index.html, you should 78
see that we've got a bunch of code that's already written for you. 79
If you look at the preview, you can see we've got cats and we've got dogs. 80
If we take a look at the goal image, then you can see what we're trying to achieve is to get a block 81
that floats to the left of the page and another one that floats to the right of the page, 82
and then to have a footer right below those two floating blocks. 83
Whereas at the moment what we've got is we've got two blocks that are stuck next to each other and we've 84
got a footer at the bottom, and the text in our blocks don't actually wrap around the image either. 85
So I want you to use what you've learned about float to modify the code in the style element of the 86
index.html to achieve this goal 87
look. 88
So you're going to need to think about how you can float this text around this image. 89
You're going to need to think about how you can do the same over here. 90
And then you need to think about how you can make this block go to the right, this block, go to the 91
left and have the footer go below both of those things. 92
It's going to need you to apply what you learned about floats and clear. 93
Pause the video and give that a go now. 94
All right. 95
So let's do the easiest thing first, which is to wrap our text around our images. 96
If we take a look at the structure of our text, you can see we've got two images. 97
And if we make both of these images float left, then we can probably get the text wrap to work. 98
So let's target the image element and then set float to left. 99
So if we look at the preview now, you can see that both of these images, once their is enough width, 100
maybe we can view it here in a full browser. 101
Once there's enough width, you can see that both of these paragraphs are now wrapping around our images. 102
So that's the first part checked. 103
Next thing we want to do is to make the cat-block float to the left so this aquamarine block, go to 104
the left and the dog-block, go to the right so that we can have this kind of layout. 105
To do that, we're going to use the float again. 106
And if we look at our code and see how it's formatted, you can see these blocks are just simply made 107
up of divs. 108
There's a cat div and there's a dog div and you can see we're already targeting those divs by changing 109
their background color to have them different. 110
Let's go ahead and make this cat div float to the left and make the dog div float to the right. 111
Now if we look at our website, you can see it's achieved that the cat block is on the left and the 112
dog block is on the right. 113
But our copyright has also gone all the way up to the top because these two things are floating. 114
So this footer is trying to wrap around both of them and the only space that's available is right here 115
in the center. 116
So we're going to have to use that trick 117
we learned about the clear property if we go into our footer and change the clear property so that it 118
clears both sides of the floats, then it now behaves properly and goes down right to the bottom. 119
And now we have our layout looking more or less like the goal image. 120
Don't worry if you have this little gap here. 121
That's because the height of the divs are not the same, because there's different amounts of words 122
in these paragraphs. 123
And this brings me on to an important point about using float as we're doing here for layout. 124
In the past, a lot of developers have used float extensively and sort of wrangled it to create these 125
kind of complex layouts. 126
Now I'm showing you this layout so you can use the clear property. 127
But in modern web development and web design, we don't actually use the float property to achieve these 128
kind of designs because there are much better tools for us like Flexbox, Grid, Bootstrap, whole load 129
of other things that is a lot less complicated to use and to understand than using float. 130
To achieve this, there can be very unexpected results if you're trying to achieve complex layouts using 131
float. 132
So I recommend to only use float when you want to wrap text around an image, 133
and in modern web design, this is what you're going to see most people doing as well. 134
So it's an important concept to learn and understand, but try to not use it on everything that you 135
see. 136
We've got better techniques, which I'll teach you very shortly.