Sign In | Subscribe
Start learning today, and be successful in your academic & professional career. Start Today!
Loading video...
This is a quick preview of the lesson. For full access, please Log In or Sign up.
For more information, please see full course syllabus of Adobe Dreamweaver CS6
  • Discussion

  • Study Guides

  • Download Lecture Slides

  • Table of Contents

  • Transcription

  • Related Books

Bookmark and Share

Start Learning Now

Our free lessons will get you started (Adobe Flash® required).
Get immediate access to our entire library.

Sign up for

Membership Overview

  • Unlimited access to our entire library of courses.
  • Search and jump to exactly what you want to learn.
  • *Ask questions and get answers from the community and our teachers!
  • Practice questions with step-by-step solutions.
  • Download lesson files for programming and software training practice.
  • Track your course viewing progress.
  • Download lecture slides for taking notes.
  • Learn at your own pace... anytime, anywhere!

What is a Clear?

  • We will explore the concept of a clear, and show you how important this property is when using the float property
  • Open clears.html
  • This is a page that contains 4 divs with different background colors assigned to them to make them easier to see
  • We will take the header and footer boxes and widen the width to 600
  • Then we will apply a float to both the left & right boxes
  • Note what has happened to the footer box
  • The float property removes the content from the normal browser flow on the page
  • That means that the footer no longer understands that there is a left & right box on the page, so it moves up to follow the header box which is not a floating element
  • We must add a clear to the footer box in order to tell it that there are floating elements on the page, so the footer must follow those, in other words, the clear makes the browser aware of the floats
  • Add the clear property to the footer div & note it goes right where it is supposed to
  • Now you understand the clear property and it's importance when using floats for page layout

What is a Clear?

Lecture Slides are screen-captured images of important points in the lecture. Students can download and print out these lecture slide images to do practice problems as well as take notes while watching the lecture.

  • Intro 0:00
  • Div Float and Dimension Properties 0:44
  • Adding a Clear Property 6:50
  • Preview in Browser 8:32
  • Height Discussion 8:49
  • Summary 9:58

Transcription: What is a Clear?

We are now going to take a look at a property called Clear.0000

Usually, you will be using this property when you apply Float to content; usually, you need to add a Clear somewhere else to get the page flowing back in the normal flow.0005

I have a page called clears within your Files panel, or within your Course Files, within the Exercise Files tab for this lesson; and we're going to explore Floats, but we are also going to explore Clears.0019

I'll add "And Clears" to this title on the page.0037

I'll go ahead and save it; and let's take a look at working with Floats and Clears in addition.0043

Right now, I have four boxes of content on my page: my header div, my header ID, has the yellow background, so it's this first box; you can see each one is labeled with the name.0050

It has a Float Left property that is disabled; so what I am going to do is enable this: I'm going to add the Float Left to that particular box.0064

Let's take a look at the property in the other boxes; I do have these moving side-by-side as long as their space; so my left has a Float Left; my right has a Float Left; and my footer has a Float Left.0076

Basically, what that says is, "Move these boxes right alongside one another, as long as there is enough room for all of them"; if there isn't enough room, it will push them down underneath.0093

That is our Float piece.0106

Let's take a look at this in the browser, just to make sure that is actually what is happening.0109

There is my header left and right; if I open this up wide enough, look what happens to my footer.0116

It pops up alongside; this is what a Float does--there is not enough space for it; everything here is floating left; when I move this in, there is not enough space for the right div; when I move it in further, the left div doesn't have enough space.0123

What I can now do is automatically place them one under the other.0141

Now, you can see how this would come in somewhat handy for a mobile website where you need your content to be much narrower than completely taking up the full width in a desktop-type monitor.0147

But that is a Float; we have it on all of our boxes.0162

Here is what we want: what I want to do is modify this header; I'm going to make it wider across the page; I want the header to spread and be the first piece of content, over to 600 pixels.0166

Then, I want my left and right div to go under that, and my footer will be down at the bottom.0181

In order to accomplish that, I'm going to go up to my header content, and I'm going to set the width here to 600 instead of 300.0187

There is my box; it is also 300 in height--I am going to drop that down to 150 instead, so it looks a little bit more like a normal header on a page.0198

And even that might be a little bit big; let me drop this down to 100, just for the sake of this page.0211

Now, you can see: what that did was only allow room for my left div alongside it in Dreamweaver.0220

If I move some other things around or make the browser window wider, my right will pop right up alongside.0228

Now, what I want is my left div to go underneath and my right div to go right alongside it.0235

Let's see, in the browser (and I'll use Firefox this time)--let's see what is happening, depending on the width of our browser window.0243

I'll make this a little bit wider; you can see my right is popping up there.0254

Now, what a Float is doing--the Float property on the left is pulling this up alongside my header.0261

That isn't really what I want to have happen, so let's try removing the Float from my left box; so I'll remove that.0268

Now, when I don't have a Float on content, it automatically goes directly underneath the previous content; so the left div looks just fine.0278

Now, what I want is my right div to pull up alongside.0289

What does my right div do?--it has a Float Left attached to it; let's see, when I put it in the browser, what happens.0294

This time, I'll go out to Internet Explorer.0304

My right div is not pulling up alongside my left div; so how do I address that?0307

Well, first of all, let's double-check: my header has a Float on it, so what is making my left div move up alongside my header was this Float property--if it's wide enough.0314

What I am going to do is remove the Float from the header.0327

You can see that puts my left div exactly where I want it to be.0332

My header is at the top without a Float; my left div is without a Float right now, and it is sitting in the correct spot; my right div has a Float...but it is not pulling up correctly.0336

That is because both of these--both the left and the right--need a Float in order to go side-by-side.0352

Let me go up to my left and take that Float and add it; so, header has no Float right now; my left div has a Left Float; my right div has a Left Float.0359

These two are ending up side-by-side.0373

What about my footer?--let's take a look at the footer.0376

Right now, my footer has a Float Left attached to it; what happens if I remove that Float Left?0380

Well, you can see I can't even see the box; so I don't want to float left, because I don't want it to pull up accidentally on the right-hand side--I want to control that; but if I use a Float before it--this right div has a Float and so does the left--it messes up that footer div.0387

This is where the Clear comes in: what I am going to do for my footer is: I am going to add a property.0408

I'll click on this, and I'll go down to where it says Clear; and as long as you use this dropdown, you can't accidentally type it in wrong.0416

It also gets you a little more familiar with some of the properties within CSS.0426

And what I am going to do is choose a Clear.0431

Now, the way I clear is either left, right, or both; and that Clear is based on what your Floats are that are before it.0434

So, my left and right div are only floating left; so all I need to do is Clear Left.0444

If I had a Left and Right Float going on, I would have to clear both.0451

Your Clear relates to how the Floats are set up; so I will Clear Left, and look at that: my footer div is in its proper place.0455

Now, I'm going to set up my footer div just like my header; so I'll come down here, and I'm going to set the height to 100; I'm going to set the width to 600; and there is my basic page layout.0466

Now, I can always modify from here.0481

So, let's assume I don't want my left and right div to be the same; I'll set my left div (right now, it's a total of 600--I'll set this one to 150 in pixel size--you can see, it all moves over) and my right div (I am going to set a width of 450--that will take up that extra 150 width that I removed from the left div).0483

And now, I'll put this in Safari--I haven't looked at it in there yet...and there is my web page, nicely laid out.0512

What is nice about the left and right div piece is: I don't have any heights set up for them.0521

The reason I have a height on my header is because there is no content to keep it that height; as soon as I add content, the content will push this height to whatever the content needs.0529

My left and right div--the content will fill it; so what happens is: I don't need a height for the left--I can turn off this height once I get content; I can do the same for the right.0542

I don't want you to think we always add height to these boxes; we don't.0556

I just am doing that because we don't have much content in there; but I didn't want the content getting in the way of the concept of Floats and Clears.0562

And when you are clearing content, the way you clear it--the property you use for clearing it--is based on how your Floats were set up.0572

If you only used Left Floats that you need to clear, you only use Left; if you used only Right, you use Right; if there is a Left and a Right before this content, you use Both as your value.0582

That is taking a look at Floats and Clears, but more importantly the Clear piece, and setting up our page layouts using CSS positioning and the concepts of Floats and Clears.0598

That is Floats and Clears for our web page layouts; and those are CSS properties that are available to us, and that is the method that most web pages are using, in terms of their positioning of content.0613

That is Floats and Clears in CSS.0630