Why does floating div make the next div take up whole space?

I know that float takes element out of normal flow partially. What came to my surprise was that I observed the next div of a floating div taking the space of floating div too. Example:

.header {
  float: left;
  height: 100px;
  width: 100%;
  background: green;
  padding: 10px;
  background-clip: content-box;
}

.footer {
  background: yellow;
  border: 1px dotted red;
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="header">HEADER</div>
  <div class="footer">FOOTER is yellow with red border</div>
</div>

Here the yellow footer comes after the green header, but the way it behaves is as if it were the container of header. The border is drawn out of both header and footer. In principle, footer should draw border only around itself. What is the reason for this behavior?

Another surprise is the green color(background) opaques the yellow one. Is this how stacking order works? Is it normal that div later in html order comes below the former divs in stacking order?

Please give reference to explain the behaviors.