What's the impact of the negative bottom margin

First, here is the html:

<div class="first">
    <div class="second">
        <div class="third">
           Hello, margin collapsing!
        </div>
    </div>
</div>

Then here is the CSS:

.first {
  background-color: red;
  padding: 20px;
}

.second {
  background-color: green;
  margin-bottom: -20px;
}

.third {
  background-color: yellow;
  margin-bottom: 20px;
}

In the final layout, the third div looks like it doesn't have the bottom margin. I know it must be the effect of the second div whose bottom margin is negative. But I don't understand how it works. Could you please provide an explanation?