Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
So in our last lesson we looked at how to float an image, so that the text wraps around the image and you can float an image to either side. Here we have our example from that lesson where the text is flowing around the image. We are just going to tweak this down here and bring this up a little bit so that we can show you how to break the text around the image if you need to do that. So here is our paragraph and we see our image here with the align=left that makes the image float to the left and the text is flowing around it.
Let's say that you wanted to break this text say after this period here and you wanted that Jez is a Gibson L6-S to start on the line after the image and not just right here. We know that the br tag will break the text. Go ahead and insert a br tag right here, br, and you will notice that we have the little shorthand notation there for the fact that br is not a container and it doesn't have a separate end tag. So we have this little shorthand notation that allows that to work in XHTML.
I'll go ahead and save this and reload the browser and there we have it, the Jez, moved from here after the sentence on the same line and moved down to the next line which is exactly what we expected to have happen, but it's not what we want. We want this to start down here under the image. So what we need is we need an attribute in the br tag, so that attribute is called clear. So we'll go ahead and put in here clear=left. This will break around any floating object on the left-hand side and make the line start after the floating objects.
We'll go ahead there and we'll save and we'll reload and there we have it. Now the paragraph continues under the image after the end of the floating object there, in that case the image. So if I change this to right of course, we won't expect this to work, because that's going to make it clear any object floating on the right-hand side and so there we have just like it was before. It breaks but it doesn't clear because we are asking it to clear on the right and the image is floating on the left. Or I can say all here and it will clear any floating object, no matter which side it is floating on.
So I'll save and reload and we see that that works. So that's how the clear attribute works in the br tag. You can say clear=left to clear floating objects on the left-hand side. You can say clear=right to clear floating objects on the right-hand side or you can say clear=all to clear all floating objects no matter which side they are on.
Get unlimited access to all courses for just $25/month.Become a member
82 Video lessons · 101301 Viewers
61 Video lessons · 88061 Viewers
71 Video lessons · 71913 Viewers
56 Video lessons · 103737 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.