How to explain CSS clear property?

Question

I was trying to understand CSS clear property. I see that it adds a new line and prevents other elements from overlapping. I have concluded it with my personal observations and some readings.

This was something I fiddled with:

.div1 {
  float: left;
  width: 100px;
  height: 50px;
  margin: 10px;
  border: 3px solid #73AD21;
}
.div2 {
  border: 1px solid red;
  clear: left;
}

<h2>Using clear</h2>
<div class="div1">div1</div>
<div class="div2">div2 - remove
  <mark>clear:left</mark> and see the impact</div>

How can you explain this to non-programmers. Say your wife?

It specifies whether an element can be next to floating elements that precede it or must be moved down (cleared) below them. Have a look at the simple but detailed explanation on [MDN](https://developer.mozilla.org/en/docs/Web/CSS/clear) — Dani Vijay, Dec 31 '15 at 07:24
@DaniMVijay I'm still [reading](http://stackoverflow.com/a/12871734/2404470) :) Thanks — Zameer Ansari, Dec 31 '15 at 07:27

score 1 · Accepted Answer · edited Dec 31 '15 at 07:44

1

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!

edited Dec 31 '15 at 07:44

michaelpri

3,521
4
30
46

answered Dec 31 '15 at 07:28

Nag

806
1
13
28

1

[This](http://stackoverflow.com/a/12871734/2404470) was good for programmers, not for non-programmers. I think we can explain this to our wives now ;) – Zameer Ansari Dec 31 '15 at 08:26

How to explain CSS clear property?

1 Answers1