Why does top margin does not get applied after clearing the float?

Question

In following, .p1 is cleared from earlier floating box and applied a top margin to it expecting it would shift further below from the top edge of viewport, then what is achieved with clear, however the margin-top does not seem to work if clear is used, if clear is removed, it works. Why?

HTML

<span style="float:right;width:30%;">
  content content content content content content content content...
</span>

<p class="p1">content content content content...</p>

<p>content content content content...</p>

CSS

span, p {
    border: 3px solid black;
    background-color: #ede;
    padding: 10px; }

 .p1{
    clear: both;
    margin-top: 200px;
   }

Can anybody explain why this margin-top does not work on .p1?

Saurav Rastogi · Answer 1 · 2016-12-26T15:02:15.703

-1

You need to add a <div> (in my case named .clear) before the .p1. Like:

<span style="float:right;width:30%;">
  content content content content content content content content...
</span>

<div class="clear"></div>

<p class="p1">content content content content...</p>

<p>content content content content...</p>

Have a look at the working snippet below:

span, p {
  border: 3px solid black;
  background-color: #ede;
  padding: 10px;
}

.p1 {
  margin-top: 200px;
}

.clear {
  clear: both;
}

<span style="float:right;width:30%;">
  content content content content content content content content...
</span>

<div class="clear"></div>

<p class="p1">content content content content...</p>

<p>content content content content...</p>

Hope this helps!

edited Dec 26 '16 at 15:02

answered Dec 26 '16 at 14:55

Saurav Rastogi

9,575
3
29
41

I could have done it, I wanna know the reason why it stays sticking below the floated block even if a very large margin-top value is set say, `margin-top:400px`. – b Tech Dec 26 '16 at 15:30
@Saurav Rastogi: If that's the case, then the clearing element's margin should start from the bottom edge of the float. But it doesn't. So your reasoning is wrong. – BoltClock Dec 26 '16 at 15:36
This is because the margins between a floated box (`span` & `.p1`) and any other box are collapsed. – Saurav Rastogi Dec 26 '16 at 15:46
Did you seriously delete your comment citing the spec and then make up a statement that's just a direct contradiction of the statement from the spec? – BoltClock Dec 26 '16 at 15:48
1

You should never add an element just to clear a float. There are far better ways to do that. – Rob Dec 26 '16 at 15:54
@Rob Yes I know we can use `display` property as well but this is just an alternative. – Saurav Rastogi Dec 26 '16 at 15:56
But a bad one that should not be done. – Rob Dec 26 '16 at 15:57
@Rob Can you tell me the reason why this is a bad way to solve the purpose in this question's context? – Saurav Rastogi Dec 26 '16 at 15:59
1

Adding elements that don't add content or value of any kind only clutters up the DOM and are useless and pointless in the face of properly using CSS which does the same thing. – Rob Dec 26 '16 at 16:04
1

As with Muhammad's answer below, this makes no attempt to actually answer the question ("why does the margin not get applied?"), only to offer a workaround. – Mark Amery Dec 26 '16 at 17:42

Why does top margin does not get applied after clearing the float?

1 Answers1