当前位置 博文首页 > m0_53521757的博客：CSS中解决父子边界重叠问题
什么情况会出现父子边界重叠问题？
???????子元素设置了margin-top属性传递给了父元素，导致子元素和父元素相邻的垂直外边距发生重叠。
即：
CSS样式代码
#div_01{
height: 300px;
width: 300px;
background-color: antiquewhite;
}
#div_02{
margin-top: 50px;
height: 100px;
width: 100px;
background-color: red;
}
<div id="div_01">
<div id="div_02">我是子元素的内容</div>
</div>
出现父子边界重叠问题：
解决方法：
1.在父标签中加内容
<div id="div_01">
我是父元素的内容
<div id="div_02">我是子元素的内容</div>
</div>
2.在父标签中加一个空的table，触发BFC（空的table会触发BFC：块级格式化上下文）
<div id="div_01">
<table></table>
<div id="div_02">我是子元素的内容</div>
</div>
3.用一个选择器在给指定的标签前后添加一个空元素（终极解决方案，以后直接拿来用）
CSS样式代码
<style type="text/css">
#div_01{
height: 300px;
width: 300px;
background-color: antiquewhite;
}
#div_02{
margin-top: 50px;
height: 100px;
width: 100px;
background-color: red;
}
.clearfix::before{
display: table;
content: "";
}
</style>
<div id="div_01" class="clearfix">
<div id="div_02">我是子元素的内容</div>
</div>
4.使父元素或者子元素浮动
CSS样式代码
<style type="text/css">
#div_01{
height: 300px;
width: 300px;
background-color: antiquewhite;
}
#div_02{
float: left;
margin-top: 50px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
<div id="div_01">
<div id="div_02">我是子元素的内容</div>
</div>
5.为父元素添加padding
CSS样式代码
<style type="text/css">
#div_01{
padding: 10px;
height: 300px;
width: 300px;
background-color: antiquewhite;
}
#div_02{
margin-top: 50px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
<div id="div_01">
<div id="div_02">我是子元素的内容</div>
</div>
6.为父元素添加overflow
CSS样式代码
<style type="text/css">
#div_01{
overflow: auto;
height: 300px;
width: 300px;
background-color: antiquewhite;
}
#div_02{
margin-top: 50px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
<div id="div_01">
<div id="div_02">我是子元素的内容</div>
</div>
7.为父元素或者子元素声明绝对定位
#div_01{
position: absolute;
height: 300px;
width: 300px;
background-color: antiquewhite;
}
#div_02{
margin-top: 50px;
height: 100px;
width: 100px;
background-color: red;
}
<div id="div_01">
<div id="div_02">我是子元素的内容</div>
</div>
8.为父元素添加border属性
<style type="text/css">
#div_01{
background-color: antiquewhite;
height: 300px;
width: 300px;
border: 1px solid aqua;
}
#div_02{
margin-top: 50px;
height: 100px;
width: 100px;
background-color: red;
}
</style>
<div id="div_01" class="cls">
<div id="div_02">我是子元素的内容</div>
</div>
