3

I have already came across some explanations, including stackoverflow, but unfortunately, I still can't understand perfectly what is the cause of it.

So, can someone please explain it in a simple way?

Here is a question similar to what I'm asking but I didn't understand what is the cause. It fixed my problem, but I just want to know why.

margin-top not working with clear: both

Thanks

Community
  • 1
  • 1
jenna salva
  • 205
  • 3
  • 12
  • This virtually identical question has a couple 'work-around' solutions: http://stackoverflow.com/questions/4198269/in-css-margin-top-is-not-working-with-clear-both – Simon_Weaver Jul 16 '14 at 04:46

2 Answers2

8

A margin is a minimal distance between an element and other elements in the same context. Floated elements are basically completely "taken out of context". They don't count for margin calculations. Any element calculating its position relative to other elements based on margins ignores floated elements entirely. So it's not that clear: both plus margin doesn't work, it's that margin ignores floated elements.

The clear: both merely causes the element to drop below all previous floated elements, its margin calculation does not push it further down because floated elements are ignored in margin calculations.

            +-------------------+ 
            |                   |
            |  display: block   |
            |                   |
            +-------------------+
                       +--------+
            ---        |        |
             |         | float: |
  margin XYZ |         | right  |
             |         |        |
            ---        +--------+
            +-------------------+  <-- effect of clear: both
            |                   |
            |    clear: both    |
            | margin-top: XYZpx |
            |                   |
            +-------------------+

The above margin XYZ says the element needs a minimal distance of XYZ to other regular elements. The next element that counts is the regular display: block element, and the distance to it is plenty. The right floating element is ignored. But the right floating element causes the lower block to be pushed down below its boundary due to clear: both.

deceze
  • 510,633
  • 85
  • 743
  • 889
  • Thank you so much! I just have a simple question. From what I understood is that margin top functions normally but it doesn't calculate any floats. Therefore, in your example, the distance between the margin-top:xyz is calculated based on the display block element. In other words, the actualy distance is between the block and the margin not the margin and the float right element. Am I right? And if that is the case, does that mean the more I increase the margin-top, the more I can see it is effect? – jenna salva Aug 11 '13 at 21:28
  • Thank again, but I'm still lost! I increased the margin-top to 1000 and 1200 and it wasn't affected. How is that possible if the distance is calculated based on the "display block element" and the "clear:both; margin-top:1200"? Shouldn't it move after I inserted a higher number? – jenna salva Aug 12 '13 at 08:55
  • Ohhh, my mistake!! Thank you sooooooo much!! Now I understand it perfectly. I appreciate your great help!!!! – jenna salva Aug 12 '13 at 09:25
0

Found this behaviour explained at w3.org:

Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float did not exist. However, the current and subsequent line boxes created next to the float are shortened as necessary to make room for the margin box of the float.

and also here. Two examples: 

<div style="float: left;">Left</div>
<div style="float: right;">Right</div>
<div style="clear: both; margin-top: 20px;">Main (the top margin is ignored for this non-positioned div)</div>

<br/><br/><br/>

<div style="float: left;">Left</div>
<div style="float: right; margin-bottom:20px;">Right (the bottom margin is used for this positioned div)</div>
<div style="clear: both;">Main</div>

http://jsfiddle.net/VQMqX/175/

Community
  • 1
  • 1
Stano
  • 8,749
  • 6
  • 30
  • 44
  • Thank you so much!! But I don't know. I'm still unable to understand it. It is either too complicated or I'm too stupid. : – jenna salva Aug 12 '13 at 08:55