问题:
当子元素设置了外边距的时候父元素会出现外边距折叠的问题
解决
1.给父元素添加border
<style>
.box1{
width: 400px;
height: 400px;
box-sizing: border-box;
background-color: pink;
border: 1px solid #fff;
}
.box2{
margin-top: 100px;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
2.给父元素添加overflow:auto
<style>
.box1{
width: 400px;
height: 400px;
background-color: pink;
overflow: auto;
}
.box2{
margin-top: 100px;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>
3.利用clearfix
<style>
.box1{
width: 400px;
height: 400px;
background-color: pink;
}
.box2{
margin-top: 100px;
width: 200px;
height: 200px;
background-color: red;
}
.box1::before{
content: '';
display: table;
}
/*
通常用claerfix来解决外边距折叠和父元素高度塌陷的问题
完成写法:
.clearfix::before,
.clearfix::after{
content:'';
display:table;
clear:both;
}
*/
</style>
</head>
<body>
<div class="box1">
<div class="box2"></div>
</div>
</body>