BFC(BLOCK FORMATTING CONTEXT)

这里是修真院前端小课堂，每篇分享文从

【背景介绍】【知识剖析】【常见问题】【解决方案】【编码实战】【扩展思考】【更多讨论】【参考文献】

八个方面深度解析前端知识/技能，本篇分享的是：

【BFC(BLOCK FORMATTING CONTEXT) 】

大家好，我是IT修真院北京分院第23期的学员郭婷婷，一枚正直纯洁善良的WEB前端程序员。

今天给大家分享一下，修真院官网CSS任务7中涉及的关于RGBA和OPACITY的透明效果有何不同以及DISPLAY:NONE和VISIBILITY：HIDDEN的区别。

小课堂【北京第213期】

分享人：郭婷婷

1.背景介绍

Boxes in the normal flow belong to a formatting context, which may be block or inline, but not both simultaneously. Block-level boxes participate in a block formatting context. Inline-level boxes participate in an inline formatting context.

2.知识剖析

BLOCK FORMATTING CONTEXTS

浮动元素、绝对定位元素，不是块级盒的块级包含块(比如inline-block、table-cell、table-capation)和overflow值不为visible的块级盒子为它们的内容建立了一个新的块级排版上下文。

在一个块级排版上下文中，盒子是从包含块顶部开始，垂直的一个接一个的排列的，相邻两个盒子之间的垂直的间距是被margin属性所决定的，在一个块级排版上下文中相邻的两个块级盒之间的垂直margin是折叠的。 （参与BFC的布局的只有普通流normal flow中的块级盒，而float、position值不为relative\static的元素是脱离BFC这一布局环境的，不参与BFC的布局）

在一个块级排版上下文中，每个盒子的左外边是触碰到包含块的左边的（对于从右向左的排版，则相反），即使在有浮动元素参与的情况下也是如此(即使一个盒子的行盒是因为浮动而收缩了的)， 除非这个盒子新建了一个块级排版上下文(在某些情况下这个盒子自身会因为floats而变窄)。

BFC布局规则

内部的Box会在垂直方向，一个接一个地放置。

Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。

每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。

计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算。

浮动的BOX区域不叠加到BFC上。

3.常见问题

3.1 如何触发BFC？

3.2 BFC的作用

4 解决方案

4.1 触发BFC

根元素

float属性不为none

position为absolute或fixed

display为inline-blcok、table-cell、table-caption、flex、inline-flex

overflow不为visible

4.2 BFC的作用

自适应两栏布局

清除内部浮动

防止垂直 margin 重叠。

5.编码实战

6.扩展思考

不同条件触发BFC产生的效果是否一样？

7.参考文献

参考1：前端精选文摘：BFC 神奇背后的原理

参考2：什么是BFC

8 更多讨论

1、body是否可以触发BFC

body可以触发，只要使用触发条件。

2、什么是IE的haslayout

hasLayout可以简单看作是IE5.5/6/7中的BFC(Block Formatting Context)。也就是一个元素要么自己对自身内容进行组织和尺寸计算(即可通过width/height来设置自身的宽高)，要么由其containing block来组织和尺寸计算。而IFC（即没有拥有布局）而言，则是元素无法对自身内容进行组织和尺寸计算，而是由自身内容来决定其尺寸（即仅能通过line-height设置内容行距，通过行距来支撑元素的高度；也无法通过width设置元素宽度，仅能由内容来决定而已）

3、两个独立的BFC垂直margin会重叠吗？

不会，因为是两个独立容器，不会影响对方。

鸣谢

感谢大家观看

BY : 郭婷婷

PPT链接：https://ptteng.github.io/PPT/PPT/css-15-bfc.html#/3

视频链接：https://pan.baidu.com/s/1jI5QGPS  密码: 5qbp