marign塌陷解决方案

一、什么是margin塌陷

在标准文档流中，竖直方向的margin会出现叠加现象（水平方向不会塌陷），两个margin紧挨着，中间没有border或者padding
margin直接接触，就产生了合并
表现为较大的margin会覆盖掉较小的margin，竖直方向的两个盒子中间只有一个较大的margin，这就是margin塌陷现象

先举个例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<style type="text/css">			
			body{
     
     
				background-color:#000;
			}
			.wrapper{
     
     
				width:200px;
				height:200px;
				background-color:red;
				margin-top:50px;
			}
			.box{
     
     
				width:50px;
				height:50px;
				background-color:pink;
				margin-top: 100px;
			}
		</style>
	</head>
	<body>
		<div class="wrapper">
			<div class="box"></div>
		</div>
	</body>
</html>

在这里插入图片描述
距离上边100px;

现在给里面的小方块设置margin-top:50px;发现两个方块位置没动;
而当给里面的小方块设置margin-top:100px;小方块带着大方块往下移动了50px

原理：父子嵌套元素在垂直方向的margin,父子元素是结合在一起的,他们两个的margi会取其中最大的值.

正常情况下,父级元素应该相对浏览器进行定位,子级相对父级定位.

但由于margin的塌陷,父级相对浏览器定位.而子级没有相对父级定位,子级相对父级,就像坍塌了一样.

二、margin塌陷解决方法

1.给父级设置边框或内边距(不建议使用)

 .wrapper{
    
    
     width:200px;
     height:200px;
     background-color:red;
     margin-top:100px;
     border-top:1px solid black;/*padding-top:1px*/
 }

2.触发bfc(块级格式上下文)改变父级的渲染规则

方法:改变父级的渲染规则有以下四种方法

给父级盒子添加

position：absolute/fixed
display：inline-block;
float：left/right
overflow：hidden
这四种方法都能触发bfc,但是使用的时候都会带来不同的麻烦,具体使用中还需根据具体情况选择没有影响的来解决margin塌陷

3.使用伪元素（推荐使用）

/* 方法一 */
.clearMar::before{
    
    
	content: "";
	display: table;/* 因为外边距无法通过单元格元素折叠 */
}

/* 方法二 */
.clearMar::before{
    
    
    content: "";
    display: block;
    overflow: hidden;
}

伪元素之所以被称为伪元素，就是因为他们不是真正的页面元素，html没有与之对应的元素，但是其用法和表现行为和真正的元素一样，所以被成为伪元素。

三、解决方法总结：

为父盒子设置border，为外层添加border后父子盒子就不是真正意义上的贴合

（可以设置成透明：border：1px solid transparent）（不推荐）
为父盒子设定padding值；（不推荐）
触发bfc（会有不同的麻烦）
1. 为父盒子添加position：absolute/fixed；
2. 为父盒子添加display：table；
3. 为子盒子添加float：left/right；
4. 为父盒子添加overflow：hidden；
给父盒子添加伪元素（before）（推荐）；