给子元素设置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,可以解决这个问题