摘要：它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。一个的范围包含创建该上下文元素的所有子元素，但不包括创建了新的子元素的内部元素。
走在前端的大道上
本篇将自己读过的相关 盒模型BFC 文章中，对自己有启发的章节片段总结在这（会对原文进行删改）,会不断丰富提炼总结更新。
一.常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:
普通流 (normal flow)
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。
浮动 (float)
在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。
绝对定位 (absolute positioning)
在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。
二、BFC 概念Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。常见的FC有BFC、IFC，还有GFC和FFC。
那么 BFC 是什么呢？
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
一个BFC的范围 包含创建该上下文元素的所有子元素，但不包括创建了新BFC的子元素的内部元素。这从另一方角度说明，一个元素不能同时存在于两个BFC中。因为如果一个元素能够同时处于两个BFC中，那么就意味着这个元素能与两个BFC中的元素发生作用，就违反了BFC的隔离作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
三、布局规则内部的Box会在垂直方向上一个接一个的放置
每个元素的左外边距与包含块的左边界相接触（从左向右），即使浮动元素也是如此。（这说明BFC中子元素不会超出他的包含块，而position为absolute的元素可以超出他的包含块边界）
属于同一个BFC的 两个相邻Box的 上下margin会发生折叠；
BFC的区域不会与float的元素区域重叠（阻止元素被浮动元素覆盖）
计算BFC的高度时，浮动子元素也参与计算（清除内部浮动）
四、触发 BFC只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值，如left、right
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 ，如hidden、auto、scroll
注意：有些文章中说HTML可以触发BFC，没有说body，按照上边介绍的一个BFC的范围和下边的案例1 来看，HTML能不能触发不确定，但是body是可以的
五、BFC的特性及应用 1.普通流中两个相邻的块元素 垂直方向上的 margin会折叠
效果图是：
发生外边距折叠，是因为他们 同属于 body这个根元素
让 它们 不属于同一个BFC，就能避免外边距折叠：
效果图是：
2.普通流中 父子嵌套关系的2个块元素 垂直方向上的 margin会折叠
然后,我们给子元素添加一个margin-top: 50px时
.son {
width: 100px;
height: 100px;
background: red;
margin-top: 50px;
}
我们神奇的发现父子元素同时"掉下来了50px",如图所示
3.BFC可以包含浮动的元素（清除浮动）正常情况下，浮动的元素会脱离普通文档流，所以下面的代码里：
外层的div会无法包含 内部浮动的div，效果见下图：
但如果我们 触发外部容器的BFC，根据BFC规范 计算BFC的高度时，浮动元素也参与计算，那么外部div容器就可以包裹着浮动元素，所以只要把代码修改如下：
就可以完成以下效果：
4.实现2栏自适应布局要求左侧固定300px,右侧自适应的布局
left
right
原理：BFC元素不会和浮动的元素重叠
参考文章：
10 分钟理解 BFC 原理
CSS中重要的BFC
浅析CSS里的 BFC 和 IFC
前端人人都应该理解的盒模型BFC渲染机制
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117233.html
摘要：如图所示如果你眼力不错或者亲自试试会发现个之间设置了的距离但是他们现在实际的间距却是。如何设置盒模型的类型通过的就可以设置为盒模型了默认是盒模型渲染机制基本慨念是英文缩写翻译为块级格式化上下文。说白了就是一种盒模型的渲染规则。 前端人人都要懂的盒模型BFC渲染机制 为什么我们说,前端工程师有必要需要了解BFC渲染机制? 因为如果你一个前端压根没听说过BFC,那你是如何理解下面这几个cs...
摘要：并且这种过程遵循标准的描述只要不是和绝对定位方式布局的，都在普通流里面。定位相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先相对绝对元素决定的。 视觉格式化模型 页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将...
摘要：提供了糟糕的支持，而虽然接近标准，但依旧未能完全正确的支持标准。尽管修复了许多的问题，但是依然延续实现中的其它故障主要是盒模型问题。因此大部分的声明将触发严格模式即依据标准的规则渲染网页。 深入理解CSS盒模型、BFC、OffsetWidth&ClientWidth&ScrollWidth 本文将从盒模型开始，一步步涉及一些常见的前端笔试和面试点 主要参考自第一篇文章，然而笔者在读的时...
摘要：中各种布局的背后，实质上是各种的组合。相反，一些块容器盒，比如非替换行内块及非替换表格单元格，不是块级盒。描述元素跟它的后代之间的影响。行盒行盒由行内格式化上下文产生的盒，用于表示一行。弹性容器外和弹性项目内的一切元素都不受影响。 CSS中各种布局的背后，实质上是各种*FC的组合。CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 FFC 和 GFC。 盒模型(Box M...
阅读 1001·2021-09-30 09:58
阅读 2827·2021-09-09 11:55
阅读 2000·2021-09-01 11:41
阅读 990·2019-08-30 15:55
阅读 3348·2019-08-30 12:50
阅读 3494·2019-08-29 18:37
阅读 3294·2019-08-29 16:37
阅读 2010·2019-08-29 13:00
