overflow: hidden; makes parent reappear around it's floated children

Question

I have a parent <div> containing two child <div>s. When I float the two child <div>s, the parent's border is no longer surrounding the children. That's because the parent no longer has a height because floated elements are removed from the normal flow. When I code the overflow property to the parent and set the value to hidden, the parent's border reappears around the children. Why does this happen?

I understand if there was a height set to the parent, and if the child exceeds it, overflow: hidden; would hide where it starts to overflow. But in this case, I don't understand what is going on.

HTML:

  <div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
    </div>

CSS:

.parent {
  border: 10px solid red;
  width: 700px;
  overflow: hidden;
}


.child1 {
  height: 325px;
  width: 100px;
  background: blue;
  float: left;
}

.child2 {
  height: 1000px;
  width: 100px;
  background: green;
  float: right;
}

Answer 1

The thing is, if you start floating elements you should use CSS "clear property" to mark the end of the floating part.

I personally, recommend you to use other layout options like flex over the floating-elements approach. If you really must use float, using clear is necessary.

You can find some more details about the clear property.