Margin on child element moves parent element

Question

I have a div (parent) that contains another div (child). Parent is the first element in body with no

Answer 1

Although all of the answers fix the issue but they come with trade-offs/adjustments/compromises like

• floats, You have to float elements
• border-top, This pushes the parent at least 1px downwards which should then be adjusted with introducing -1px margin to the parent element itself. This can create problems when parent already has margin-top in relative units.
• padding-top, same effect as using border-top
• overflow: hidden, Can't be used when parent should display overflowing content, like a drop down menu
• overflow: auto, Introduces scrollbars for parent element that has (intentionally) overflowing content (like shadows or tool tip's triangle)

The issue can be resolved by using CSS3 pseudo elements as follows

.parent::before {
  clear: both;
  content: "";
  display: table;
  margin-top: -1px;
  height: 0;
}

https://jsfiddle.net/hLgbyax5/1/