Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
There will be times when creating float-based layouts that you want the floated elements to no longer affect the elements to follow them. In our own layout, for example, the mainContent region and the Sidebar are using floats to achieve this two column layout. We don't want or need the footer to be overlapped by our floated elements, like it is here. Towards that end, we'll apply a clear to our layout. Clearing floats is an essential technique for achieving reliable float-based layouts. It's your way of saying that's it, those floated elements don't float any element past this point.
The clear property has three values: left, right and both. By clearing to the left or to the right, you're essentially saying nothing can float to the left or right of the clear element. A clear value of both says that, no element may float to clear the element, whether to the right or the left. Once floats are cleared, normal document flow continues and cleared elements will continue to push down and response to elements above them, even the floated elements. To finish this layout, we'll clear the floated element, which will move it down below our floated elements into the desired location. So back here in Dreamweaver and I have the index.html page opened up from the 10_05 folder. Now I'm going to go over to my main_layout. css and find the #footer selector and I'm just going to go ahead and add the clear, both property to it. Since this sidebar floats to the right and the mainContent floats to the left.
Now, if I do a Save All and test that in my browser, Ah! Success. Notice the footer is pushing down below the mainContent and the sidebar region and normal document flow is being restored. If I increase the height of either the mainContent or the sidebar, the footer would push down with it and let's check that out. I'm going to go to the mainContent region and I'm going to take the height and I want to increase that height to 500 pixels instead of 300. We'll do a Save All and Preview that on our browser. So, notice that the clear property is causing the footer to continually to be pushed down by these other elements, regardless of which one is taller and there is our finished layout.
So we use clearing to complete our layout and force the footer down below the floated elements, but clearing can have other uses as well, such as containing floats. First, it occur within other elements can cause the containing element to collapse. The floated element is removed from normal document flow, so the parent considers itself empty and collapse it in and on itself. Take our interior content here. This image, and paragraph are contained within another div tag. If we were to float this image, the container would no longer see the image as being part of its contents, so its height would collapse down below the height of the actual image.
Let's illustrate that and then what we can do to fix that, by clearing a contain float. Let's go back in the Dreamweaver and let's try another selector. So I'm going to select the # innerContent selector and choose New CSS Rule and I'm just going to do #selector of # innerContent img. So we are going to float the image inside of that, go ahead and Click OK. Click on the Box Category and choose Float, left, Click OK. Now, you can dramatically see that the container element is collapsing. It only contains the paragraph now and not the image anymore because remember the image is removed from normal document flow. If I were to preview that in my browser, you can see the container collapsing. How do we keep that from happening? Well, we do that by clearing the float inside the container element, there are actually two ways to do that.
Notice that we have a class style called clear and it has a clear both property to it. So if I were to comment for example, and create another paragraph underneath it, choose this empty paragraph and give it a Class of clear; that would have the clear both property applied to it and if I Save this and Preview that in my browser, I can see that now we are containing this floated element. There is another way to contain floats as well. If I grab this empty paragraph and deleted it, my float collapses again. But if I take the parent element; in this case the #innerContent and I give it a float property as well and I'll go ahead and float that to the left, that also forces it to contain any floats inside of it. So I'll do a Save All and Preview that in my browser.
So we have learned it to restore normal document flow and to prevent elements from continuing to float, we use the clear property. If we have floated elements inside containers, we'll occasionally have to contain the floated elements by either clearing at a strategic point inside the container or by floating the container itself. If you become familiar with these techniques, you'll understand how 90% of all CSS-based layouts online are created.
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.