What Does the CSS Rule "Clear: Both" Do

What does the CSS rule clear: both do?

I won't be explaining how the floats work here (in detail), as this question generally focuses on Why use clear: both; OR what does clear: both; exactly do...

I'll keep this answer simple, and to the point, and will explain to you graphically why clear: both; is required or what it does...

Generally designers float the elements, left or to the right, which creates an empty space on the other side which allows other elements to take up the remaining space.

Why do they float elements?

Elements are floated when the designer needs 2 block level elements side by side. For example say we want to design a basic website which has a layout like below...

enter image description here

Live Example of the demo image.

Code For Demo

/*  CSS:  */
* { /* Not related to floats / clear both, used it for demo purpose only */    box-sizing: border-box;    -moz-box-sizing: border-box;    -webkit-box-sizing: border-box;}
header, footer {    border: 5px solid #000;    height: 100px;}
aside {    float: left;    width: 30%;    border: 5px solid #000;    height: 300px;}
section {    float: left;    width: 70%;    border: 5px solid #000;    height: 300px;}
.clear {    clear: both;}

<!-- HTML --><header>    Header</header><aside>    Aside (Floated Left)</aside><section>    Content (Floated Left, Can Be Floated To Right As Well)</section><!-- Clearing Floating Elements--><div class="clear"></div><footer>    Footer</footer>

What is the use of style=clear:both?

clear:both makes the element drop below any floated elements that precede it in the document.

You can also use clear:left or clear:right to make it drop below only those elements that have been floated left or right.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+

How to explain CSS clear property?

Lets say we have two rows, where each row has 3 chairs.

Now imagine you are sitting on the chair in the middle of first row.

If you say clear:left, that means you're not allowing anybody to sit to your left, likewise, if you say clear:right, you are not allowing anybody to sit to your right.

And if you say clear:both you are not allowing anybody to sit on either side and to choose the next row of chairs!

CSS layout clear both affects the flow

Your questions:

1- Why the tag with clear both is at the bottom?

According to css specs for clear:

both

Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted
from elements earlier in the source document.

So the clear:both; on h1 also clears the float on an earlier element, which is not even part of the containing div of the h1.

2- How can I get it work with clear both?

If you need to keep clear:both; on h1 and keep it at the beginning of its container div, the simplest way is to add overflow:auto; to the container.

Demo

#main {
    margin-left:210px;
    background:#f9c;
    height:400px;
    overflow:auto;
}

Why clear both do not work for right in css?

clear means an element won't bubble up beside a previous floating element.

Since div2 is clear: both, it doesn't move up beside div1.

Since div2 is float: left, it moves to the left and div3 bubbles up beside it.

div3 doesn't have clear so nothing is stopping it from bubbling up.

CSS clear: both not working, element keeps staying on the side of each other

clear: both; only is relevant for elements that are floated, which is not the case for your span (those spans are inline-blocks, but that's another thing, clear has no effect on inline-blocks)

clear both or overflow hidden , a clearfix solution

overflow:hidden makes the element establish a new block formatting context. This fixes the float containment of any children floating within it. This CSS fix is more practical then including an additional element in the HTML styled with clear:both and works on all modern browsers, including IE7+.