Bug of Margin

When the simple div box nesting, found that there is a bug in setting margin-top, and then went to Google search, found that the margin does exist a bug.

A bug is when a parent element is nested, and if the child element is a block element, the block element is set to Margin-top, and if the parent does not have a border, then Margin-top is on the parent element.

Here is the code in the body:

<div class= "Red" >    <div class= "BLACK" ></div> </div>

The code in style:

<style>  . red{    background:red;    width:200px;height:200px;  }. black{    Background:black;    width:100px;  height:100px;    margin-left:50px;    margin-top:50px;   } </style>

Like above, Black's margin-top does not work on black, but on red.

The test found that when you add a border to the parent element, you can eliminate the bug, but adding a border will affect the size of the box, which is not useful if you need to recalculate the size of each part of the box. When you add Over-flow:hidden to a parent element, you can also eliminate the bug. Make it work on the black child element. Another way is to change the current black element into an inline block-level element, but in special cases it affects the layout of the page and is not recommended. This is the simple basis of the solution, after all, is a beginner, can not be solved with more advanced knowledge technology, Expect to learn more advanced solutions later.

Here are the workarounds for using Overflow:hidden;

<style>   . red{     background:red;     width:200px;height:200px;     /*overflow:hidden;*/   }   . black{     background:black;     width:100px;  height:100px;     margin-left:50px;     margin-top:50px;   }   </style> 
The other two methods do not demonstrate.
Beginner html, please give me a lot of advice.
Bug of Margin