CSS中BFC是什么（BFC开发中有哪些应用）

Joker • • 前端笔记 • 254 阅读
CSS中BFC是什么（BFC开发中有哪些应用）网址：

BFC(Block formatting context) 块级格式化上下文,它是一个独立的渲染区域，其中的元素不受外界的影响，同样的里面的元素也不会影响外面。

  • BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

  • 内部的Box 会在垂直方向，一个接一个的放置；

  • Box 垂直方向的距离由margin决定；同一个Box中的相邻Box的margin会发生重叠；

  • 每个盒子（块盒与行盒）的左边距从左往右格式化，即使浮动也是如此。

  • BFC的区域不会与float box重叠。(两栏布局原理)

  • 计算BFC的高度时，浮动元素也参与计算。(清除浮动原理)

  • float的值不是none；

  • position 的值不是relative或者relative；

  • display的值是inline-block、table-cell、flex、或者inline-flex;

  • overflow的值不是visible;

1. 同一个 BFC 下外边距会发生折叠



    
    

从上图可以看出，两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，两个盒子的距离只有 30px;而不是相加60px;

这就是上面说的，BFC布局的第三条。

如果想避免重叠可以将其放在不同的BFC容器中；