请描述 BFC(Block Formatting Context) 及其如何工作

小课堂【北京-WEB-A组】
分享人：要来点本子吗

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

今天给大家分享一下，修真院官网css任务15，深度思考中的知识点——请描述 BFC(Block Formatting Context) 及其如何工作

##1.背景介绍

我们常常说文档流的时候其实分为定位流、浮动流和普通流三种。其中普通流就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC是block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。

##2.知识剖析

一：BFC 是什么
[BFC]是可视化CSS渲染网页的一部分，它是一个区域，块级布局，相互浮动在这个区域发生。
一个BFC块区域包含所有里面的元素，除子元素创建了新的BFC。（因为各个BFC是一个独立的区域，BFC之间相互不影响）
所以：由于html(根元素)是独立的BFC，在里面的浮动，块级布局等才会相互影响，若新创建BFC,则相邻BFC之间的浮动元素，或是其他元素将不会影响。如,相邻两个块级元素的外边距折叠的情况将不会发生。

二：触发条件
　　满足下列条件之一就可触发BFC

【1】根元素，即HTML元素

【2】float的值不为none

【3】overflow的值不为visible

【4】display的值为inline-block、table-cell、table-caption

【5】position的值为absolute或fixed
　　
三：BFC的作用

包含浮动元素(清除浮动)BFC会根据子元素的情况自适高度，这个特性是对父元素使用overflow:hidden/auto/scroll、 float:left/right 样式可以闭合浮动的

不被浮动元素覆盖浮动元素会无视兄弟元素的存在，覆盖在兄弟元素的上面，为该兄弟元素创建BFC 后可以阻止这种情况的出现

四：BFC规则

内部的Box会在垂直方向，一个接一个地放置。就是我们平常div一行一行块级放置的样式。

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

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

BFC的区域不会与float box重叠。应用于两列布局

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。上下margin不影响，浮动不覆盖

计算BFC的高度时，浮动元素也参与计算。如父元素高度塌陷，清除浮动。父元素高度由内部撑开，计算bfc高度，内部浮动的子元素也参加。

##3.常见问题

1.外边距折叠（Collapsing Margins）
2.让一个没有设置高度的容器包含浮动元素
3.阻止文字环绕

##4.解决方案
1.外边距折叠

外边距折叠有很多种情况，最简单的就是上下两个盒子，上面的设置了margin-bottom，下面的设置了margin-top，这时候总的外边距并不是两者相加，而是取最大的外边距作为总的外边距。（假设外边距的设置为正值）
下面的代码发生了外边距折叠。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距折叠</title>
</head>
<body><div class="container"><p>盒子1</p><p>盒子2</p></div>
</body>
</html>

css

     .container {background-color: red;width: 400px;}p {font-size: 30px;background: yellow;margin: 100px 0;}

下面的代码通过使用overflow: hidden;新创建一个BFC，从而实现阻止外边距折叠。
（overflow: hidden;本来的含义是：如果盒子的内容超出盒子，则这部分内容隐藏。）

<div class="container"><p>盒子1</p><div class="bfc"><p class="bfc">盒子2</p></div></div>.bfc {overflow: hidden;}

发生了外边距折叠（上），使用BFC阻止外边距折叠（下）。

2.容器无高度包含浮动元素
无BFC，容器无高度包含浮动元素会发生如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>容器无高度包含浮动元素</title>
</head>
<body><div class="container"><p>盒子1</p><p>盒子2</p></div>
</body>
</html>

css:

     .container {background-color: red;width: 400px;outline: 1px dashed red;margin-top: 10px;}p {font-size: 30px;background: yellow;margin: 100px;float: left; }

可以看到，由于浮动元素是脱离普通文档流的，所以.container盒子发生了塌陷，高度变为0。如何阻止这种情况发生呢，可以给上面的代码.container盒子添加了一条样式overflow: hidden;，解决了容器盒子塌陷的问题。
效果图如下：

3.阻止文字环绕

左图右文，文字环绕图片，效果图：

代码如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>左图右文 - 文字环绕图片</title>
</head>
<body>
<div class="container"><div class="pic"><img src="OddEyes.jpg" alt="超天新龙 异色眼革命龙"></div><div class="text">超天新龙 异色眼革命龙 怪兽 效果 灵摆 特殊召唤 12 星 / ATK: ？ / DEF: ？ / 龙 / 光
←12 【灵摆】 12→
①：自己不是龙族怪兽不能灵摆召唤。这个效果不会被无效化。
②：以自己墓地1只龙族的融合·同调·超量怪兽为对象才能发动。这张卡破坏，那只怪兽特殊召唤。
【怪兽效果】
这张卡不能通常召唤。用从手卡的灵摆召唤或者把自己场上的龙族的融合·同调·超量怪兽各1只解放的场合才能特殊召唤。
①：把这张卡从手卡丢弃，支付500基本分才能发动。从卡组把1只8星以下的龙族灵摆怪兽加入手卡。
②：这张卡的攻击力·守备力上升对方基本分一半的数值。
③：1回合1次，把基本分支付一半才能发动。这张卡以外的双方的场上·墓地的卡全部回到持有者卡组。 </div>
</div>
</body>
</html>

css:

    .container { background-color: gainsboro; width: 500px;min-height: 400px;padding: 10px}.pic {float: left;margin-right: 10px;}
}

有时候我们不需要文字环绕，就想让文字老老实实待在右边。加入.text {
overflow: hidden;
}
效果如下：

##5.编码实战
见目录4

##6.扩展思考
为什么用overflow触发而不用其他的？
因为其他如float,positon等等会影响布局,达不到我们想要的效果

##7.参考文献

参考一：深入了解BFC
参考二：BFC是什么

##8.更多讨论

1.什么是IE的haslayout？

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

2.overflow的auto还是visible可以触发bfc?

auto，hidden，scroll可以触发

3.利用浮动再触发bfc用来干嘛？
用来实现左列定宽，右列自适应布局

感谢大家观看

By 要来点本子吗

技能树.IT修真院

“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。

这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧！

猛戳这里有惊喜

【修真院web小课堂】请描述 BFC(Block Formatting Context) 及其如何工作相关推荐

BFC(Block Formatting Context) 及其如何工作
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能. 大家好,我是IT修真院北京分院 ...
【修真院WEB小课堂】定时器有哪些用法？
这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文献] 八个方面深度解析前端知识/技能,本篇分享的是: [定时器有哪些用 ...
【修真院web小课堂】angular js常用指令 ng-blur、ng-change、ng-focus、ng-disabled是如何运用到表单验证中的？
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员今天给大家分享一下,修真院官网js(职业)任务八,深度思考中的知识点--angular js常用指令 ng-bl ...
【修真院web小课堂】对一个数组 FILTER、SOME、MAP、FOREACH的操作分别有什么作用？
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--对一个数组 FILTER.SOME.MA ...
【修真院web小课堂】ID和class有什么区别？
大家好,我是IT修真院武汉分院web第16期的学员孟晨,一枚正直纯洁善良的web程序员今天给大家分享一下,修真院官网js(职业)任务一,深度思考中的知识点--ID和class有什么区别? 1.背景介 ...
【修真院pm小课堂】详谈用户体验五要素
[修真院pm小课堂]详谈用户体验五要素用户体验五要素在产品的工作中经常听到,那么他究竟是什么呢?怎样去使用呢? 一.战略层明确商业目标和用户目标,解决两者之间的冲突,找到平衡点,确定产品原则和定位 ...
【修真院java小课堂】ArrayList浅析
大家好,我是IT修真院郑州分院第8期学员,一枚正直善良的java程序员.今天给大家分享一下,修真院官网 java任务中可能会使用到的知识点: ArrayList浅析 width="640&q ...
【修真院Java小课堂】Annotation注解
标题: [修真院Java小课堂]Annotation注解开场语: 大家好,我是IT修真院西安分院第三期学员,一枚正直纯洁善良的JAVA程序员,今天给大家分享一下,修真院官网JAVA任务七,深度思考中 ...
点击箭头切图 html,项目切图规范 css精灵图 css小箭头代码 BFC (Block Formatting Context) 块级格式化上下文...
项目切图规范 PS常用工具移动工具移动工具主要负责图层.选区.等的移动.复制操作. 快捷键:v 抓手工具快捷键:h 空格 + 鼠标左键拖动,空格键可临时转换为抓手工具. 放大镜工具放大镜工具可 ...

【修真院web小课堂】请描述 BFC(Block Formatting Context) 及其如何工作

请描述 BFC(Block Formatting Context) 及其如何工作

【修真院web小课堂】请描述 BFC(Block Formatting Context) 及其如何工作相关推荐

最新文章

热门文章