Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When text is floating around an image, sometimes you'll need to force some text to start after the image, say for heading or for some other purpose. Let's make a working copy of image -float.html, and we'll call this image-float-working.html. I'll open that in my text editor. You'll notice a few things here. Up at the top, we have a style for floating right an image, and then down here we have an image that uses that class float-right, and we have some text to float around the image.
So let's go ahead and load this up in the browser and there we have our image of
the scissors with text floating around it.
Now if we want to break the text so that say this paragraph here starting with
Ut non ante, if we want that to start after the image and to break that floating
around it, there is a couple of different ways to do that.
So that's right here.
Now in previous versions of HTML, it was common to use the
tag for this and you would do something like this, br clear="right" and if I save that and load it up in the browser, you'll see that that paragraph now starts after the image.
That clear="right", it says anything that's floating on the right. Let's clear that before we start this paragraph. So this obviously still works because browsers are designed to support legacy code, but this is actually considered obsolete in HTML5 because the use of a lot of different attributes to do these kinds of things was originally the philosophy behind HTML and HTML was getting really, really big and it wasn't doing the job, and so stylesheets with CSS was developed and now it's much preferable and much more flexible to do these kinds of things with CSS.
So instead I can just take this tag and I can say style= and I can say clear: right, like that.
tag and I can say style= and I can say clear: right, like that.If I save this and load it in the browser, you'll see I get exactly the same result. So using the CSS clear property works great. There are three possible values for clear left, right, and both, and I'll often create a class for this and this actually works really great. You see up here I have a class that's called .clear and it has clear: both in it, and so instead of this, I can just say class="clear" and now I can use it in different parts.
I can use it on different elements, and I can use it in different places in my
HTML and it'll still work exactly the same.
I hit Reload and that still works exactly the same.
In fact, if I wanted to use a here and
for this, now I can. I can close my
here andI can say br class="clear" and I can load this up in the browser and I have exactly the same result. So the CSS property clear is used to clear a floating object like an image. This gives you the control to start text after the floating object like the image instead of flowing around it.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101646 Viewers
61 Video lessons · 88404 Viewers
71 Video lessons · 72239 Viewers
56 Video lessons · 103980 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.
Your file was successfully uploaded.