边距堆叠
一致的处理方案；设置padding或许border或许触发BFC
边距堆叠有一下三种状况：
首先把一切的margin花样清空
<head>
<title>边距堆叠</title>
<style>
html *{
margin-top: 0px;
padding: 0px;
}
</style>
</head>
<body>1.父子元素之间
块级父元素与第一个或许末了一个子元素（父元素不存在上边框、上内边距、内联元素、消灭浮动）。即这个父元素对外展示出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。父元素的高度：100 或许110 都对.没有overflow: hidden的时刻父边距和子边距堆叠了，父的高度只要100.加了overflow: hidden，父元素成了新的bfc,就处理了边距堆叠的征象，margin-top 没有陷落进去，所以父的高度是110px;
<section id="parentAndChild">
<style>
.parent {
background-color: red;
/*overflow: hidden;*/
}
.child {
height: 100px;
margin-top: 10px;
background-color: yellow;
}
</style>
<div class="parent">
<div class="child"></div>
</div>
</section>2.相邻兄弟姐妹元素
两个div的边距是50px 而不是90，取了最大值，若为负值，则取相对值最大的，若一正一负，则取二者的和。<section >
<style>
.left{
height: 100px;
margin-bottom: 50px;
background-color: red;
}
.right{
height:100px;
background-color: blue;
margin-top: 40px;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>3.空块元素
假如存在一个空的块级元素， border、 padding、 inline content 、height 、min-height 都不存在，那末上下边距居中将没有任何障碍，上下边距将兼并。取值划定规矩同2一样
<section>
<p style="margin-bottom: 0px;">这个段落的和下面段落的间隔将为20px</p>
<div style="margin-top: 20px; margin-bottom: 50px;"></div>
<p style="margin-top: 0px;">这个段落的和上面段落的间隔将为20px</p>
</section>处理方案：BFC解说
BFC (block formatting context) 块级花样化上下文 =====》是为了处理边距陷落（边距堆叠）题目。基本概念
BFC (block formatting context) 块级花样化上下文
基本原理
即规划划定规矩
1、每一个元素的margin box的左侧，与包含块border box 的左侧相打仗，纵然浮动也云云
2、BFC地区不会与float box 堆叠
3、BFC是一个断绝的自力的容器，容器内里的子元素的不会影响到表面的元素，反之亦然。
4、盘算BFC高度的时刻，浮动元素也介入盘算。
哪些元素天生BFC
1、overflow: 不为visible
2、postion: absoluted, fixed
3、float 不为none
4、根元素
5、display:inline-block\table-cell\table-caption\flex\inline-flex
运用和处理了什么题目
1、自适应两栏规划
<section>
<style>
.left{
width: 100px;
float:left;
height: 100px;
background-color: yellow;
}
.right{
height: 150px;
background-color: red;
overflow: hidden;
}
</style>
<div class="left"></div>
<div class="right"></div>
</section>2、消灭内部浮动
<section>
<style>
.par{
border:5px solid red;
width:1000px;
overflow: hidden;//天生BFC，把浮动元素的高度盘算在内，变相地消灭了内部浮动
}
.child{
border: 5px solid blue;
float: left;
height:100px;
width: 100px;
}
</style>
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
</section>3、防备边距堆叠(BFC中子元素边距堆叠)
两个div 中心取了最大值30为堆叠了，在p表面包裹一层容器，并触发该容器天生一个
BFC。那末两个P便不属于同一个BFC，就不会发作margin堆叠了.
<section>
<style>
.wrap{
overflow: hidden;
}
.top{
height: 100px;
margin-bottom: 40px;
background-color: red;
}
.bottom{
height: 100px;
margin-top: 30px;
background-color:blue;
}
</style>
<p class="top"></p>
<div class="wrap">
<p class="bottom"></p>
</div>
</section>总结：由于BFC内部的元素和外部的元素相对不会相互影响，因而， 当BFC外部存在浮动时，它不应当影响BFC内部Box的规划，BFC会经由过程变窄，而不与浮动有堆叠。一样的，当BFC内部有浮动时，为了不影响外部元素的规划，BFC盘算高度时会包含浮动的高度。防止margin堆叠也是如许的一个原理。
