BFC（Block Formatting Context）——块级格式化上下文

BFC BFC全称是Block Formatting Context，即块级格式化上下文。一句话概括，就是页面上的一个隔离的独立容器，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。 注意点：BFC 并不是元素，而是某些元素带有的一些属性，因此，是这些元素产生了 BFC ，而它们本身并不是 BFC ，这个概念需要区分清楚。 如何触发产生一个BFC： float的值不为none。 overflow的值不为visible。 position的值不为relative和static。 display的值为 inline-block,table-cell, table-caption中的任何一个。 （根元素本身就带有BFC的特性） 生成BFC后的三个作用： 1.不和浮动元素重叠 2.清除元素内部浮动 3.防止垂直 margin 重叠 加深理解BFC FC（Formatting Contexts）——格式化上下文，是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 不同 FC 下的盒子有不同的表现，FC一共有四种类型： CSS2.1规范中只有BFC、IFC CSS3推出GFC、FFC两种新类型 BFC 这个概念来自于视觉格式化模型中的正常流。 视觉格式化模型：根据 基础盒模型(也就是块盒、行内盒、匿名盒以及一些实验性的盒) 将文档中的元素转换一个个盒子的实际算法，它规定了用户端在媒介中如何处理文档树。 有三种定位方案：分别是常规流(Normal flow)，浮动(Floats)以及绝对定位(Absolute positioning)。——在定位时，浏览器会根据元素的盒类型和上下文对这些元素进行定位。 从上面的信息中可以得知，BFC是页面CSS 视觉渲染的一部分，用于决定块盒子的布局及浮动相互影响范围的一个区域。 参考链接： https://juejin.im/post/59b73d5bf265da064618731d#heading-14 https://juejin.im/post/5cee1b38e51d4556be5b39e1#heading-0 https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html https://www.cnblogs.com/leejersey/p/3991400.html

本文章由javascript技术分享原创和收集