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

Question

I know that a float partially forces an element out of a normal stream. To my surprise, I noticed that the next div of the floating div also occupies the space of the floating div. 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>

Run codeHide result

Here the yellow footer appears after the green header, but the way it behaves looks as if it were a header container. The border extends from the header and footer. Basically, the footer should draw a border only around itself. What is the reason for this behavior?

Another surprise is green (background), opaque yellow. So does the stacking procedure work? Is it normal that a div later in html order goes below previous divs in stacking order?

Please provide a link to an explanation of the behavior.

Answer 1

, , , , . . , , , - , , .

, . , . , ( ) , ( ).

, , . , , 100%, , . , ?

, html 1 , . :

, : HEADER FOOTER.

float: left , 1 . , , , . , 1 , , .