BFC的使用原理

当我们在设置两个div并且给他们加上不同的外边距的时候，两个div的外边距会重叠在一起，进而导致外边距吞距离，因此，为了解决当前的问题，我们可以使用BFC特性去解决当前的问题，BFC可以格式化上下文本（formating context）：是w3c制定的，是页面中的一块渲染区域，并且有一套自己的渲染规则，决定了元素将如何定位，以及和其他元素的关系和相互的作用

具有BFC特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且BFC具有普通容器所没有的一些特性

首先，在未触发的情况下，是这样的

这时候我们发现，两个div之间的间隙是最大的那个外边距的间隙，出现了外边距的折叠，因此，为了解决当前的问题，我们可以给两个div元素外面嵌套两个div，并且分别以overflow：hidden；去清除浮动，目的就是在子元素有浮动的情况下去给父元素清除浮动带来的影响，目前我的子元素并未进行浮动，但是如果浮动的话就会出现高度塌陷，因此这串代码是必要的，因此一定要给父级元素加上进行保险哦

此时我们发现被重叠的margin外边距回来了

但其实我们可以发现，原理是用父级元素包裹住子元素后，第一个子元素的下外边距和第二个元素的上外边距将两个包裹的父级元素给挤开了，其实是两个父级元素上下依次排列开来，这就是BFC的原理，那么，这种简单的使用小技巧是不是可以给当前困惑的你带来一些新的想法和思路呢？