一. 什么时候会发生外边距重叠
1. 只有块级元素会发生外边距重叠
2. 常见的2中外边距重叠发生情况
(1) 相邻的父子元素间
(2) 相邻的同级元素间
这里只记录相邻父子元素间的外边距重叠, 同级元素间的可据理类推
二. 相邻父子元素的外边距重叠
.box1 {
height: 300px;
width: 300px;
background-color: antiquewhite;
margin-bottom: 100px;
}
.box2 {
height: 100px;
width: 100px;
background-color: aqua;
}
.box2 {
margin-top: 100px;
}
<div class="box1">
<div class="box2"></div>
</div>
结果:
三. 外边距重叠解决方法
(一) 原理
1.
BFC(Block Formatting Context) 块级格式化环境
- BFC是一个CSS中的一个隐含的属性,可以为一个元素开启BFC
开启BFC该元素会变成一个独立的布局区域
- 元素开启BFC后的特点:
1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
3.开启BFC的元素可以包含浮动的子元素
- 可以通过一些特殊方式来开启元素的BFC:
1、设置元素的浮动(不推荐)
2、将元素设置为行内块元素(不推荐)
3、设置元素为绝对定位(不推荐)
4、将元素的overflow设置为一个非visible的值
- 常用的方式 为元素设置 overflow:hidden 开启其BFC 以使其可以包含浮动元素
2.
用点东西将父子元素的边缘隔开
(二) 具体方法
1. 给父元素或子元素开启BFC
// 下面7条任意一条都可以:
.box1 {
float: left;
display: inline-block;
position: absolute;
overflow: hidden; /* 推荐这个, 其他6个都不推荐 */
}
.box2 {
float: left;
display: inline-block;
position: absolute;
}
2. 用点东西将父子元素的边缘隔开
.box1 {
padding-top: 1px; /*不推荐*/
border-top: 1px solid transparent; /*不推荐*/
}
/* 推荐👇 */
.box1::before {
content: '';
display: table; /* flex|grid|flow-root */
}