对BFC理解

我心飞翔 分类:javascript

BFC.png

前言

以前对BFC的理解仅限于,两个相邻的box盒子设置margin,外边距会出现塌陷,会以margin最大值作为两个盒子的距离。解决思路是只设置一个方向的margin值,或者给任意一个box盒子再嵌套一个box盒子。后面发现自己的理解太狭隘,于是在网上收集资料,分析;写下自己对BFC的理解。

一、什么是BFC

Formatting context 是W3C,CSS2.1规范中的一个概念。它是页面中的一块渲染区域,有着自己的渲染规则。最常见的Formatting context有Block Formatting context(BFC, 块级格式化上下文)和Lnline Formatting context(IFC).CSS3中添加了GFC和FFC。

BFC(块级格式化上下文)是Formatting context的一种,它是页面中的一块渲染区域,并且有一套属于自己的渲染规则(不仅限于下面的规则);它决定了在其的元素渲染方式:

  1. 内部的盒子会在垂直方向上一个接一个的放置
  2. 对于同一个BFC的俩个相邻的盒子的margin会发生重叠,与方向无关。
  3. 每个元素的左外边距与包含块的左边界相接触(从左到右),即使浮动元素也是如此
  4. BFC的区域不会与float的元素区域重叠
  5. 计算BFC的高度时,浮动子元素也参与计算
  6. BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然

二、BFC形成条件(不仅限于下面的条件)

  1. 根元素 ,即在html元素下的块级元素;
  2. float元素为left,right
  3. overflow的值不为visible,为auto、scroll、hidden
  4. position的为absolute、fixed
  5. display的值为inline-block、inltable-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid

三、BFC的作用

BFC应用场景:

  1. 防止外边距塌陷

image.png

image.png

两个盒子相邻外边距会发生塌陷,两个盒子的距离会以margin最大的值作为。

解决方法:

  1. 只给一个盒子设置外边距

image.png

  1. 给其中任意一个盒子再嵌套一个盒子

image.png

结果:

image.png

  1. 清除内部浮动,计算元素高度

在css中一个盒子,里面有个浮动元素的盒子,计算高度时,不计算浮动元素的高度。

image.png

image.png

解决方法:

  1. 触发外部盒子形成BFC渲染区域

image.png

image.png

  1. 自适应多栏布局

image.png

效果如下:

image.png

left盒子浮动,right盒子宽度不能自适应,并且与浮动的盒子重叠,左外边距接触都是同一个点。

解决方法:
1.触发right盒子形成BFC区域,因为BFC区域不会与浮动元素重叠;每个元素的左外边距与包含块的左边界相接触(从左到右)

image.png

效果如下:

image.png

总结:BFC是一个独立的盒子,有自己的渲染规则,里面的子元素不影响外面的元素。

参考文献:

1.juejin.cn/post/684490…
2.github.com/zuopf769/no…

回复

我来回复
  • 暂无回复内容