外边距传递:
- 如果子元素的垂直外边距和父元素 的垂直外边距相邻,就会发生外边距传递,在子元素的外边距传递给父元素。
- 传递条件:
1、 相邻
2、 垂直
使用特性:
- 父元素的垂直外边距不会和子元素重叠
开启BFC:
- overflow: hidden; 副作用小
<style>
/*
BFC解决外边距传递
使用特性:
- 父元素的垂直外边距不会和子元素重叠
开启BFC:
- overflow: hidden; 副作用小
*/
.outer {
width: 200px;
height: 200px;
background-color: red;
overflow: hidden;
}
.inner {
width: 100px;
height: 100px;
background-color: #bfc;
margin-top: 100px;
}
</style>
</head>
<body>
<div class="outer">
<div class="inner"></div>
</div>
</body>