search

weijiyang / GOOD-IDEA

这里记录一些灵感~详见ISSUES
1 stars 0 forks source link

BFC #39

Open weijiyang opened 4 years ago

weijiyang commented 4 years ago

BFC是什么？

BFC（Block Formatting Context）中文直译就是‘块级格式上下文’，它是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。

通俗点说，BFC是一个独立的布局环境，我们可以理解为一个箱子（实际上是看不见摸不着的），箱子内部的元素无论如何翻江倒海，都不会影响到外部。转换为BFC的理解则是：BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。）并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

BFC的产生条件

  1. overflow不为visible；

  2. 浮动（float样式不为none ）；

  3. 绝对定位（position样式为absolue或者fixed ）；

  4. display为inline-block / table-cell / table-caption / flex / table-flex；

BFC特性（作用）

  1. 在BFC中，内部的Box会在垂直方向，一个接一个地放置；

  2. Box垂直方向的距离由margin决定，同一个BFC下相邻两个Box的margin会发生重叠；

  3. 在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘），即使存在浮动也是如此。

即不会发生margin穿透

  1. 形成了BFC的区域不会与float box重叠（可阻止因浮动元素引发的文字环绕现象）；

  2. 计算BFC高度时，浮动元素也参与计算（BFC会确切包含浮动的子元素，即闭合浮动）。

原本浮动元素应该是脱离文档流的，但BFC中会计算其高度。

综上特性所述，BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。

BFC特性的一些应用

  1. 实现自适应两栏布局

应用了“BFC的区域不会与float box重叠”的特性；一边浮动，另一边自适应的部分形成BFC，那么两者就不会重叠，避免了出现文字环绕及类似情形。

  1. 解决父元素高度塌陷（也就是闭合内部浮动 ）

应用了“计算BFC高度时，浮动元素也参与计算在内”的特性；

  1. 解决垂直方向上兄弟元素的margin重叠

应用了“属于同一个BFC的两个相邻Boc的margin会发生重叠”的特性。意味着如果相邻兄弟元素不属于同一个BFC，就不会发生margin重叠了；