08. The “clear” property

So our site is slowly taking shape. One thing you may have noticed though is that our footer is not in the correct position. This is because we floated the elements above it and haven’t specified what should happen to footer. So now it’s time to rectify that:

In order to push the footer underneath our “nav” and “section” tags we need to change the footer rule to the following:

footer {
   clear            : both;
   background-color : #d0f5a9;

Once again you can leave the background colour as whatever you put but the important new property is “clear“.

It’s probably fairly obvious what “clear” is doing, but I’ll clarify it here anyway. Because we floated elements on our HTML page, any elements that follow on from those will simply try and wrap around the floating ones. The solution to this is to use the “clear” property which undoes any floating that had occurred. You can choose which side to “unfloat” (left or right) or you can clear both (as we’ve done).

Leave a Comment

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>