What does the CSS rule "clear: both" do?

Asked 2012-10-13T09:17:32.190

323

What does the following CSS rule do:

.clear { clear: both; }

And why do we need to use it?

css css-float

Edit Report

2 Answers

Just try to remove clear:both property from the div with class sample and see how it follows floating divs.

answered 2012-10-13T09:26:31.720

When you want one element placed at the bottom other element you use this code in CSS. It is used for floats.

If you float content you can float left or right... so in a common layout you might have a left nav, a content div and a footer.

To ensure the footer stays below both of these floats (if you have floated left and right) then you put the footer as clear: both.

This way it will stay below both floats.

(If you are only clearing left then you only really need to clear: left;.)

answered 2012-10-13T09:18:58.993