塌陷现象

塌陷现象产生的场景：
两个块级元素互相嵌套，子元素的 margin-top 会作用在父元素上
结果：
导致父元素一起往下移动

塌陷.png
原因： 子元素的上边界和父元素的上边界是完全重合的，完全重合的话子元素的margin-top的作用区域就是边界外侧的空白区，而父元素的margin-top的作用区域也是边界外侧的空白区，子元素给了margin-top之后也作用到父元素上了所以父元素也跟着往下掉，因为子元素和父元素的上边界重合了

        <style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		.box {
			width: 500px;
			height: 500px;
			background-color: #6cf;
                        }

		.son {
			width: 200px;
			height: 200px;
			background-color: pink;
			margin-top: 100px;
		}
	</style>

<body>
        /*父盒子*/
	<div class="box">
                /*子盒子*/
		<div class="son"></div>
	</div>
</body>

解决方法：
1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top）
2. 给父元素设置overflow：hidden溢出隐藏
3. 转换成行内块元素
4.设置浮动

<style>
		* {
			margin: 0;
			padding: 0;
			box-sizing: border-box;
		}

		}

		.box {
			width: 500px;
			height: 500px;
			background-color: #6cf;
	     /* 
                1. 设置边框
                border-top: 1px solid transparent;
                2. padding-top: 1px;
                3. oh overflow: hidden;
	        4. 父元素设置display: inline-block;
             */


		}

		.son {
			width: 200px;
			height: 200px;
			background-color: pink;
                	margin-top: 100px;
		}
	</style>
</head>

<body>
	<div class="box">
		<div class="son"></div>
	</div>
</body>

嗯哼哼🍻🍻🍻

如何解决 margin“塌陷”？

塌陷现象