开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情”

BFC简介

display属性为block, list-item, table 的元素，会生成 block-level box。并且参与 Block Formatting Context； 简称BFC

box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 Inline Formatting Context简称IFC

BFC特性

1. 垂直排列
2. 节点的垂直方向距离由margin决定，相邻节点的margin会发生重叠，以最大margin为合并值
3. BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
4. 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
5. 计算BFC的高度时，浮动元素也参与计算

如何形成BFC

根节点：html 非溢出可见节点：overflow:!visible 浮动节点：float:left/right 绝对定位节点：position:absolute/fixed 被定义为块级的非块级节点：display:inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

BFC造成问题

父盒子高度塌陷，兄弟盒子重叠。

1. 兄弟盒子重叠

在有son2的情况下，发现son2和son1重叠了，这是以为在明确son1是float left情况下 son1明确形成了bfc可是son2没有形成。解决办法使得son2也形成bfc

根据形成bfc规则 以下任意属性均满足

    /* display: flex; */
    /* overflow: hidden; */
    float: left;

修改代码点击运行看效果

2. 父元素高度塌陷

删除son2 发现父元素高度塌陷了。 根据BFC规则

计算BFC的高度时，浮动元素也参与计算

所以我们只需明确父元素为bfc即可。 因此运用上述形成bfc条件 以下任意条件均满足

    /* overflow: hidden; */
    /* display: flex; */
    /* float: left; */
    position: absolute;

margin边距不生效

• 父子元素 margin 重叠问题

现象：子元素margin不生效 解决办法： 根据BFC形成条件父元素增加下面任意一个属性，使其形成BFC

 position: absolute;
  /* float: left; */
  /* display: flow-root; */
  /* overflow: hidden; */
  /* padding: 1px; */
  /* border: 1px solid transparent;

修改运行可看效果。

• 两个子元素margin合并

现象：垂直距离应该是20px 结果只有10px son1和son2 都有margin 10px 两个盒子应该垂直距离相差20px结果两个盒子的距离只有10px。 这个是由于以下规则决定的

节点的垂直方向距离由margin决定，相邻节点的margin会发生重叠，以最大margin为合并值

要解决两个子元素margin合并问题我们可以

1. 包裹一层元素。

<div style="display: flex">
     <div class="son2"></div>
</div>

根据bfc规则

BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签

所以可以解决此问题，实际上把<div class="son2"></div> 改成<p class="son2"></p>也可解决，原理一致

2. 人为son1用padding son2用margin

总结

BFC特性

1. 垂直排列
2. 节点的垂直方向距离由margin决定，相邻节点的margin会发生重叠，以最大margin为合并值
3. BFC就是页面中的一个隔离的独立容器，容器里的标签不会影响到外部标签
4. 垂直方向的距离由margin决定， 属于同一个BFC的两个相邻的标签外边距会发生重叠
5. 计算BFC的高度时，浮动元素也参与计算

如何形成BFC

根节点：html

非溢出可见节点：overflow:!visible

浮动节点：float:left/right

绝对定位节点：position:absolute/fixed

被定义为块级的非块级节点：display:inline-block/table-cell/table-caption/flex/inline-flex/grid/inline-grid

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 3 天，点击查看活动详情”