CSS 中的外边距折叠及 BFC
外边距折叠(Margin Collapsing)是CSS布局中的一个常见现象。它指的是当两个垂直相接的块级元素之间的外边距相遇时,它们会合并成一个外边距,大小为两者中的较大者,而不是相加。
BFC(Block Formatting Context)是CSS布局中的一个概念,它是一个独立的渲染区域,内部的元素布局不会影响到外部的元素。
为了解决外边距折叠问题,可以通过创建BFC来隔离元素的布局环境。一个常见的方法是设置元素的overflow
属性为auto
、scroll
或hidden
。
例如:
/* 创建BFC的CSS规则 */
.bfc-container {
overflow: auto; /* 或者使用 'scroll' 或 'hidden' */
}
<!-- 使用BFC隔离外边距 -->
<div class="bfc-container">
<div style="margin: 10px 0;">Block 1</div>
<div style="margin: 20px 0; overflow: hidden;">Block 2</div>
</div>
在这个例子中,Block 1
和Block 2
之间的外边距不会折叠,因为Block 2
被包裹在一个创建了BFC的容器内。
评论已关闭