关键词：
在学习CSS的过程中，掌握一些常用方法或效果实现的原理对于我们的学习来说是很有帮助的。如最常见的清除浮动和取消外边距塌陷时使用overflow:hidden;，在学习初期往往只知道有这种用法，且使用时会受限，这样在学习掌握的过程中难免困惑和记错。在这里，根据查找网上学习资料和个人理解，尝试着用对BFC的一些浅见来帮助理解学习，如有错误之处，欢迎指正！
一、BFC的定义
BFC(Block formatting context)，即"块级格式化上下文"
它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
BFC元素特性表现原则：内部子元素再怎么变动，都不会影响外部元素。
BOX的解释：CSS布局的基本单位
可以理解为整个CSS布局是由各种各样的Box堆砌在一起(渲染)显示的。元素的类型和display属性，决定了Box的类型，由类型决定参与何种 Formatting Context（一个决定如何渲染文档的容器），渲染方式不同决定了元素不同的显示结果。盒子分类：
- block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
- inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
Formatting context
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
二、BFC布局规则
- 内部的Box在垂直方向上，一个接一个地放置（由于根元素也会生成BFC，页面默认的排列方式就是从上到下）。
- 内部的Box在水平方向上，子元素margin box left紧靠父级border box left（默认从左到右格式化排列，右浮动从右向左）。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（外边距的合并现象）
- BFC的区域不会与float box重叠（浮动也会生成BFC）。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算（overflow清除浮动的由来）。
三、BFC的生成和常见用法
1、根元素
2、float属性不为none
创建之初是为了实现文字环绕图片的功能，现常用于布局，浮动元素本身BFC化，然而浮动元素有破坏性和包裹性，失去了元素本身的流体自适应性，无法用来实现自动填满容器的自适应布局。错有错招，由于兼容性良好，比较符合普通人的堆砌认知，接受度比较好。
另，浮动会使行内元素以行内块级呈递，即可以设置宽高。
3、position为absolute或fixed
这两个严重脱标，默认相对于浏览器进行定位布局。当绝对定位存在非static父级时，相对父级定位(子绝父相)，也是布局最常见的用法。
另，这两种定位会使行内元素以行内块级呈递，即可以设置宽高。
4、display为inline-block, table-cell, table-caption, flex, inline-flex
display：inline-block会让元素尺寸包裹收缩，由内容决定尺寸，会使元素以行级元素渲染(可成排显示)，但以块级元素呈递(可以设宽高)。
display：table-cell会让元素像单元格一样，跟随内容宽度显示，但是宽度设定极大也不会超过表格容器的宽度。
5、overflow不为visible
常用于清除浮动（参见规则6）、解决外边距合并（参见规则2）
本身还是个很普通的元素，块状元素的流体特性保存相当完好，用于自适应布局非常棒，但超出边界的内容会被裁切，用于清除浮动时需要注意。
先写到这里，后面再补充。
10分钟了解什么是bfc(代码片段)
BFC对于已经是一个耳熟能详的词汇了，而且在前端面试中，这题也是一个高频题。虽然我们平时在开发的时候知道如何利用BFC来解决问题，但是我们要具体说出BFC的概念和怎么触发BFC，我相信很多小伙伴也是和我一样不知道的什... 查看详情
css常见样式总结之水平垂直居中方案及bfc小结
...于自己以后复习，好记性不如烂笔头。针对BFC，主要需要了解其触发条件，具体深入理解及使用还需要联系实际应用。首先通过一个思维导图更直观的展示:水平居中对于行内元素：text-align:center;对于确定宽度的块级元素：widt 查看详情
bfc
...，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的Formattingcontext有Blockfomattingcontext(简称BFC)和Inlineformattingcontext(简称IFC)。 查看详情
如何使用bfc清除css浮动以及解决margin合并的问题
1、CSS最基本的布局单位 Box是 CSS布局的对象和基本单位。 元素的类型和display的属性决定了Box的类型。 2、BFC BFC（Box FormattingContext）是一个独立的渲染区域，规定内部的元素如何布局，并且... 查看详情
10分钟理解bfc原理(代码片段)
一、常见定位方案在讲BFC之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:普通流(normalflow)在普通流中，元素按照其在HTML中的先后位置至上而下布局，在这个过程中，行内元素水平排列，... 查看详情
jwt的初步了解以及sessioncookie机制(代码片段)
1.什么是状态保持？想要了解JWT，首先需要知道什么是状态保持，举一个例子来说：无论是在web上还是在手机app上，我们都可以以游客的身份访问，此时都会有登录/注册字眼，当我们登录之后，就会是我们的登录信息，那么，保... 查看详情
关于blockformattingcontext－－bfc和ie的haslayout
原文出自：穆乙’sBlog专注前端技术一、BFC是什么？BFC（BlockFormattingContext）直译为“块级格式化范围”。是W3CCSS2.1规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作... 查看详情
bfc
BFC已经是一个耳听熟闻的词语了，网上有许多关于BFC的文章，介绍了如何触发BFC以及BFC的一些用处（如清浮动，防止margin重叠等）。虽然我知道如何利用BFC解决这些问题，但当别人问我BFC是什么，我还是不能很有底气地解释... 查看详情
float常见用法与问题--摘抄
...真的弄懂了吗？我会在这里介绍我对float的认识与使用，以及使用过程中遇到的问题。对float的认识1.float元素具有BFC模型特性当给元素添加float属性后，元素便会具有BFC模型的效果。比如给内联元素span等添加float属性后，内联元... 查看详情
自学tensorflow——1.框架初步了解以及构建简单的计算图计算(代码片段)
1.初步了解 tensorflow是谷歌的一款开源深度学习框架。运行前，需要先定义好计算图，最后通过会话启动计算图，这么做的目的是为了防止数据在python和c++(tensorflow底层)传输的时间浪费。2.tensorflow安装 pipinstalltensorflow即可... 查看详情
深入理解bfc
...渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC是blockformattingcontext，也 查看详情
初步了解vue源码(代码片段)
1、源码学习目录本项目所剖析的Vue.js源码版本是目前最新的版本，版本号为v2.6.11，其代码目录如下： 从上面的目录结构可以看出，Vue的整个项目包含了类型检测相关、单元测试相关、与平台无关的核心代码以及跨平台... 查看详情
bfc神奇背后的原理
BFC已经是一个耳听熟闻的词语了，网上有许多关于BFC的文章，介绍了如何触发BFC以及BFC的一些用处（如清浮动，防止margin重叠等）。虽然我知道如何利用BFC解决这些问题，但当别人问我BFC是什么，我还是不能很有底气地解释清楚... 查看详情
理解bfc
...定位也是脱离文档，不会对其他的兄弟元素造成影响二、关于BFCBFC，块级格式化上下文。BFC 的元素排列属于普通流BFC就像一个大盒子一样装着一堆东西，这堆东西无论怎 查看详情
关于unity的版本控制工具plasticscm的初步使用方法
作为Unity初学者，同时作为编程的初学者，之前没有怎么接触过多人协作的版本控制系统。一开始我们尝试使用git进行版本控制，但是作为小白的我们没有马上找到进行文件的传出、传入等操作的方便的方式。于是我... 查看详情
对dom的初步了解
什么叫DOM，DOM是文档对象模型DocumentObjectModelDOM树：根结点(document) 父结点(parentNode) 子结点(childNodes) 兄弟结点兄弟结点 sibling)(sibling) DOM在HTML文档中常见的几种结点类型：1、DOCUMENT_NODE （document）文档根结点... 查看详情
对运维的初步了解
运维，这里指互联网运维，通常属于技术部门，与研发、测试、系统管理同为互联网产品技术支撑的4大部门，这个划分在国内和国外以及大小公司间都会多少有一些不同。一个互联网产品的生成一般经历的过... 查看详情
github的初步了解和使用
.../p/8708471.html先如下展示自己的安装和注册过程：对GitHub的初步了解现如下： 1.GitHub是一个面向开源及私有软件项目的托管平台，它只支持gitu作为唯一的版本库格式进行托管。用户可以在GitHub上十分轻易的找... 查看详情