摘要：就是神奇之一，它也是最熟悉的陌生人，因为你一不小心就会触发它然而你并没有意识到它正在神奇地发挥作用。最常见的有和，中还增加了和，这里就不深入研究了。其根本原理就是它们处于同一个，符合属于同一个的两个相邻元素的会发生重叠的规则。
BFC，你也许听过这个词，但是你可能不是很有底气地解释清楚。
写样式的时候，往往加了一个样式或者改了一个属性，就能达到你期望的效果，一切都是如此地神奇。
BFC就是神奇之一，它也是最熟悉的陌生人，因为你一不小心就会触发它然而你并没有意识到它正在神奇地发挥作用。
我们先看看CSS布局的基本单位：
block-level box: display 属性为 block, list-item, table 的元素，会生成 block-level box，并且参与 block formatting context
inline-level box: display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box，并且参与 inline formatting context
那这个formatting context又是什么玩意儿？
它是W3C CSS2.1规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。也就是说我们平时在布局的时候，它默默地提供了一个环境，使得HTML元素在这个环境中按照一定规则进行布局。
最常见的formatting context有Block Formatting Context(BFC)和Inline Formatting Context(IFC)，CSS3中还增加了GridLayout Formatting Context(GFC)和Flex Formatting Context(FFC)，这里就不深入研究了。
BFC定义：它是一个独立的渲染区域，只有block-level box参与，其中的元素按照规定的渲染规则进行布局，并且这个区域与外部毫不相干。
二、BFC的布局规则与触发规则刚才我们说到BFC中的元素有一套规定的布局规则：
内部的元素会在垂直方向一个接一个地放置
元素垂直方向的距离由margin决定，属于同一个BFC的两个相邻元素的margin会发生重叠
每个元素的左外边距与包含块的左边界相接触(对于从左往右，否则相反)，即使存在浮动也是如此
BFC的区域不会与float元素重叠
计算BFC的高度时，浮动元素也参与计算
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此
刚才我们又提到BFC是一块渲染区域，那这块渲染区域到底在哪，它又是有多大，这些由生成BFC的元素来决定，CSS2.1中规定满足下列CSS声明的元素便会生成BFC（触发规则）：
根元素
float的值不为none
overflow的值不为visible
position的值为absolute或fixed
display的值为inline-block, table-cell, table-caption, flex, inline-flex
注：display: table也认为可以生成BFC，主要原因是table会默认生成一个匿名的table-cell，正是这个匿名的table-cell生成了BFC
上面这些CSS声明的元素生成了BFC，而它们本身并不是BFC，这一点需要区分。
三、BFC的应用说了这么多有用没用的，我们平时布局的时候到底怎么应用呢：
1.防止垂直margin重叠
有点布局经验的朋友都知道margin collapse，也就是相邻的垂直元素同时设置了margin后，实际margin值会塌陷到其中较大的那个值。其根本原理就是它们处于同一个BFC，符合“属于同一个BFC的两个相邻元素的margin会发生重叠”的规则。
我们可以在其中一个元素外面包裹一层容器，并触发该容器生成一个BFC。那么两个元素便属于不同的BFC，就不会发生margin重叠了：
我属于一个BFC
我属于另一个BFC
如果是我的话会直接设置200px，或者只设置其中一个元素的margin（懒可以偷，但原理需知道）
2.防止浮动子元素高度塌陷
float: left
float: left
如果我们将.parent元素的overflow: hidden去掉，那么.parent元素就获取不到浮动元素的高度了。但是加上overflow属性后触发了BFC，计算BFC的高度时，浮动元素也参与了计算。
3.防止文字（或其他元素）环绕
float: left
我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕我只是文字但我不会环绕
正常情况下，如果一个块级元素设置成了float，那么他的兄弟元素会环绕其布局。这里我们给.text加上overflow，文字所在的区域就产生了BFC，元素的左边总是触碰到容器的左边，即使存在浮动也是如此。
这里举例了几个比较经典的应用，我们在以后的布局中也可以慢慢探索其中的奥秘之处，做一个能写一手好样式还能懂原理的前端er。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/112620.html
写在最前：BFC看起来是个很陌生的概念但它却时时发生在我们工作中，如何清除浮动影响？如何避免margin穿透问题？如何编写两栏自适应布局？都和BFC有这密不可分的关系，下面走进切图妞的世界，分分钟搞定BFC！ 一、什么是BFC？ BFC概念 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素...
写在最前：BFC看起来是个很陌生的概念但它却时时发生在我们工作中，如何清除浮动影响？如何避免margin穿透问题？如何编写两栏自适应布局？都和BFC有这密不可分的关系，下面走进切图妞的世界，分分钟搞定BFC！ 一、什么是BFC？ BFC概念 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素...
写在最前：BFC看起来是个很陌生的概念但它却时时发生在我们工作中，如何清除浮动影响？如何避免margin穿透问题？如何编写两栏自适应布局？都和BFC有这密不可分的关系，下面走进切图妞的世界，分分钟搞定BFC！ 一、什么是BFC？ BFC概念 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警 一劳永逸的搞定 flex 布局 寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...
阅读 1228·2023-04-26 01:58
阅读 2050·2021-11-04 16:04
阅读 1574·2021-08-31 09:42
阅读 1582·2021-07-25 21:37
阅读 903·2019-08-30 15:54
阅读 1905·2019-08-30 15:53
阅读 2927·2019-08-29 13:28
阅读 2536·2019-08-29 10:56
