解决给子元素设置margin-top后，会影响父元素一起向下移动；

给子元素设置margin-top后，会影响父元素一起向下移动；

代码片

    .parent {
        height: 400px;
        width: 400px;
        background-color: blue;
    }
    
    .child {
        height: 100px;
        width: 100px;
        background-color: brown;
		/* margin-top:100px;*/
    }


<div class="parent">
    <div class="child"></div>
</div>

对子元素child添加margin-top: 100px;后，父元素会跟子元素一起下移动

代码块
.parent {
height: 400px;
width: 400px;
background-color: blue;
}

    .child {
        height: 100px;
        width: 100px;
        background-color: brown;
        margin-top: 100px;
    }

解决方案：
1、父元素设置border之后，可以解决这个问题
2、父元素或者子元素浮动了，可以解决这个问题
3、父元素设置overflow:hidden，可以解决这个问题