外边距崩塌问题及BFC

    <style>
        main{
            margin:0 auto;
            background: blue;
            height: 500px;
        }
        section{
            margin-top: 50px;
            /*background: orange;*/
        }
    </style>

<main>
    <section>11111111</section>
    <section>22222222</section>
    <section>33333333</section>
    <section>44444444</section>
</main>

在这里插入图片描述
我们本想要的效果是我们的section块距离main块30px，而事实上我们得到却是main块随着section块一起向下移动了30px，而第一块section块并没有30px的距离。这就是发生了外边距塌陷（margin collapse）。

那么为什么会发生这样的情况呢？

这就是所谓的父子元素间的边距塌陷
如果块级父元素中，不存在border, padding, 行内元素以及清除浮动这四条属性（对于border和padding，也可以说，当上border及上padding宽度为0时），那么这个块级元素和其第一个子元素的上外边距（margin-top）就可以说”挨到了一起“。此时这个块级父元素和其第一个子元素就会发生上外边距塌陷现象，换句话说，此时这个父元素对外展现出来的外边距将直接变成这个父元素和其第一个子元素的margin-top的较大者。

三个解决办法：
/* 解决办法 1：为父盒子设置1像素的上边框,颜色一样，但是会撑大父盒子，所以父盒子高度减1*/
main {
border-top: 1px solid rgb(184, 184, 167);
height: 499px;
}
/* 解决方法 2：为子盒子设置1像素的上内边距，也会撑大子盒子，所以子盒子高度减1 /
section {
padding-top: 1px;
height: 199px;
}
/ 解决方法 3：父盒子设置overflow：hidden ，触发bfc ,不会撑大盒子*/
.father {
overflow: hidden;
}

BFC (Block formatting context) “块级格式化上下文”

它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。

触发
满足下列条件之一就可触发BFC

根元素，即HTML元素

	- float的值不为none
	- overflow的值不为visible
	- display的值为inline-block、table-cell、table-caption
	- position的值为absolute或fixed

特性
1.阻止垂直外边距（margin-top、margin-bottom）折叠
属于同一个BFC的两个相邻块级子元素（元素都要在文档流中）的上下margin会发生重叠—— 分为两个BFC就可以消除这种margin 重叠

2.包含浮动元素
可以包含它内部的所有元素，包括浮动元素——因此一清除内部浮动

外边距崩塌问题及BFC

猜你喜欢