在布局中经常碰到在子div中设置margin-top值时失效的问题,怎么解决呢?
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3">
<div class="box4"></div>
</div>
.box1{
width:100px;
height:100px;
margin-bottom: 20px;
background: red;
/*去掉border时box2的margin-top将失效;不建议这么解决*/
border: 1px solid blue;
}
.box2{
width:50px;
height:50px;
background: pink;
margin-top: 20px;
}
.box3{
width:200px;
height:200px;
background: red;
/*触发BFC,margin-top生效*/
overflow:hidden;
/* float: left; */
/* position: absolute; */
}
.box4{
width:50px;
height:50px;
background: pink;
margin-top: 20px;
}
BFC的了解:https://blog.csdn.net/fylxy000/article/details/107262200