前端菜鸟成长日记2024/1/16-BFC

1、什么是BFC？

在实习的时候，有一个小伙伴问了我个布局问题

问我为什么他的布局有问题，我拿过来看了看，是啊，为什么有问题呢？不应该啊

后面自己查了查，原来是BFC！那什么是BFC呢？

BFC

BFC，全称为Block Formatting Context，中文名为“块级格式化上下文”，是Web页面的可视化CSS渲染的一部分。

在一个BFC中，其内部的盒模型（box）将会按照特定的方式进行布局：

1. 布局规则：

   • BFC中的块级元素会一个接一个地垂直排列。
   • 盒子间的垂直外边距（margin）会发生折叠，但仅限于属于同一个BFC内的相邻盒子。
   • 每个盒子（包括浮动元素）的左边框（对于从左至右的书写模式）会与包含块（例如父元素）的内边界接触，即使存在浮动元素也不会发生覆盖。
   • BFC不会与浮动元素所在的浮动上下文重叠。

 2、为什么会触发BFC

父子元素

当两个元素简称A（父亲）和B（子），当B设置margin-top: 20px;而A盒子没有设置外边距时，会导致外边距重叠，小伙伴问的问题就是这个情况，那么怎么解决呢？

给A盒子添加一个overflow: hidden;就可以让A盒子成为BFC，因为BFC有自己的布局规则，所有不会受外边距合并影响！

兄弟元素

按道理A和B的间距应该是40px，那为很么变成了20px呢？为什么不相加？

还是因为边距重叠！

因为A和B的边距重叠，如何两个盒子边距一样大就随便取一个值，如何A比B大，就取大的值，那么有一个边距是负数怎么办？

问得好！

如何是负数就正数+负数，那么怎么解决呢？

给一个盒子外面套一个盒子就好啦！把他们隔绝开来。

让第一个A盒子处于BFC容器中就不会边距重叠啦。