Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Now that we have discussed the basics of floating elements on the page, we need to look at floating elements in a little bit more detail. Specifically we are going to explore the concept of clearing a float. Once you float an element, all other elements on the page underneath it, where they come after within a normal document flow, are affected by the float. In order to stop an element from affecting the rest of the elements on the page, you clear the float and sometimes it's very important that we clear our floats, especially when we are working with floats for layout. I am working with the floats_clearing.htm and you can find that in your Chapter 3, Example Files, if you are following along with me just go ahead and open that one up. We also want to explore the concept of how inline level elements respond to floats and compare that with the way that we know that, block level elements respond the floats. You can see at the top of the page, we have an element named Box 1 and if I click inside of it, I can see that it's a div and it has an id of Box 1.
Well, directly after the div tag, there is a paragraph and it's just a regular paragraph. So all of the text inside the paragraph is an inline level element. So if we were to float box number 1 then I will just go ahead and open up my CSS Styles panel. Once again I am going to resize this panel so that I can see everything including all the properties and I will click #box1 and again, I will probably need to resize this tab a bit too. The CSS Styles panel is very flexible but you are going to find you are going to be expanding different areas of it frequently. So a lot of times when I am working, I will close all of the other panels. I am going to click Add Property and I will type in float and I will just go ahead and float that to the left. And notice what happens when we have inline elements, all the line text is wrapping around box number 1, instead of going underneath it and that's exactly what it's supposed to be doing. If you feel like you have seen this before. Well floating was originally designed so that images could have text wrap around them and when we take an image and change it's align property to left or right, you are actually performing a float. So floats had been around for a long time, we are just now controlling them with CSS. So this looks fine but what would happen if the text was a little bit shorter? We don't want the headline to wrap around the box at all. But if I take the text and I am just going to highlight the bottom portion of the paragraph, if I delete that, I could have a story headline or headline also wraps around the box and that is not what we wanted. We want the headline to definitely stay below the box. Well to do that, we can do what's known as clearing the float. So I am going to go to my h1 selector in the CSS Styles panel and I am going to add a property to it and the property I am going to add is the clear property. Now the clear property has several values and I will grab the pulldown menu, here from our values so we can see that as left, right, both, none, and inherit. None is the default value and inherit just says inherit whatever the clearing value of the parent element is. I am actually going to say clear left. That essentially tells the h1 do not allow any element to float to your left. So notice what happens in our document. The heading 1 breaks back down below the float element and the paragraph is free to continue the float. So by being very selective in how we use clearing, we can take certain elements that are used in floating to control our positioning and make sure that those floats don't affect other areas on your page and we are going to see that that becomes very important, when we begin doing our layout.
Clearing can assist this with one other thing as well. So I am going to Save and Close my floats_clearing.htm and I want to open up another example file. So I am going to go into my Files panel and I want to open up the floats_container.htm. So floats_ container.htm. What we have here is we have an image with a paragraph and they are inside of a container element. So if I click in one of the paragraphs, I can use the Tag Selector down at the bottom to see that, I have a paragraph inside of a div tag with the class container applied to it. Well if I come in and create a brand new selector where I am running selector for the image, so I am just going to do an Img tag and I am going to go to my Box category. This is where we find our floating controls inside the CSS Rule Definition dialog box. The upper right-hand corner, I can go to Float and choose left because I want the text to wrap around me. You can also choose to help padding kind of help you out here as well, so I am going to go ahead and give it a padding same for all of 10 pixels all the way around and that will keep the text from butting right up against the actual image. So go ahead and click OK. You can see what happens, our image remains in place and the text comes up to float around it. The problem is that the containing element no longer is tall enough to contain the image and the reason for that is because remember the image because we floated it is removed from normal document float. So the container doesn't really see it as part of the container any more. So the height of the container is now being driven by the paragraph itself. There are two ways to go ahead and make sure that your containing elements are actually the height that you want them to be and that is containing the floated elements inside of them. There are two ways to do that.
The first way is if that the containing element also has a floated property. It will contain any nested floats. So we will go ahead and try that. So we will go to the container, class style, and I am going to add a property there and I will add a float property and we will float that to the left. As soon as we float, the containing element to the left, it expands to hold its nested float. So I am going to remove that float property and we will talk about the second way that you can make sure your container elements actually stretch to contain a floats. If I look in Code view, so I am going to switch over to Code view.
I notice that after the paragraph, there are no other elements so it's just the image, paragraph, and the div tag. However, if I look in my CSS Styles, there is actually a selector already written for a line break. So if I select the line break, I can see that it has a clear property of both which would clear both the right or left floated elements. So all I really need to do, in this case, switch back to Design view, I am going click right after the paragraph and I will just insert a line break, and that's Shift+Enter or Shift+Return. And because I didn't have an element inside that, that has a clear applied to it. The container will now stretch to fit the entire height of the contained elements. So as long as you have one element inside the containing element that has a clear applied to it, usually you want to do at the very end. It will clear the floats above it and the containing element will again expand to contain all of its nested content including the floated elements. So there are two ways that you can make your parent elements contain all the nested elements including any float elements. One is to give the parent element itself a float property. The second is to add a clear property to at least one of the elements inside a parent element and that will cause the parent element to go ahead and contain all of these nested elements including the float itself. In our next movie, we will use the information that we have learn about floats to create a simple two column floated layout that will serve as the basis for our Cheek Chastain Gallery site.
Get unlimited access to all courses for just $25/month.Become a member
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.