关于BFC的初步了解以及常见使用

Posted 2020-08-09 MauriceChans

　　在学习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布局规则　　

1. 内部的Box在垂直方向上，一个接一个地放置（由于根元素也会生成BFC，页面默认的排列方式就是从上到下）。
2. 内部的Box在水平方向上，子元素margin box left紧靠父级border box left（默认从左到右格式化排列，右浮动从右向左）。
3. Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（外边距的合并现象）
4. BFC的区域不会与float box重叠（浮动也会生成BFC）。
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6. 计算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）

　　本身还是个很普通的元素，块状元素的流体特性保存相当完好，用于自适应布局非常棒，但超出边界的内容会被裁切，用于清除浮动时需要注意。

　　先写到这里，后面再补充。