对BFC规范(块级格式化上下文：block formatting context) 的理解

BFC 是什么？

BFC 就是“块级格式化上下文”的意思,创建了 BFC 的元素就是一个独立的盒子,不过只有 Block-level box 可以参与创建 BFC, 它规定了内部的 Block-level Box 如何布局,并且与这个独立盒子里的布局不受外部影响,当然它也不会影响到外面的元素。

BFC 有一下特性：
内部的 Box 会在垂直方向,从顶部开始一个接一个地放置。
Box 垂直方向的距离由 margin 决定。属于同一个 BFC 的两个相邻 Box 的 margin 会发生叠加,
每个元素的 margin box 的左边, 与包含块 border box 的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
BFC 的区域不会与 float box 叠加。

BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素,反之亦然。
计算 BFC 的高度时,浮动元素也参与计算。

如何触发 BFC？
float 除了 none 以外的值
overflow 除了 visible 以外的值(hidden,auto,scroll)
display (table-cell,table-caption,inline-block, flex, inline-flex)
position 值为(absolute,fixed)
fieldset 元素

(W3C CSS 2.1 规范中的一个概念,它是一个独立容器,决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用。)一个页面是由很多个 Box 组成的,元素的类型display 属性,决定了这个 Box 的类型。

不同类型的 Box,会参与不同的 Formatting Context(决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染,也就是说BFC内部的元素和外部的元素不会互相影响。

转载于:https://www.cnblogs.com/yxbje/p/7359130.html