课堂课题：
请描述 BFC(Block Formatting Context) 及其如何工作
关联任务：
任务一
直播时间：
2019-05-30 15:30:00
课堂内容：
视频链接：
PPT链接：
提交按钮：
小课堂内容格式
标题：
【修真院xx（职业）小课堂】课题名称
开场语：
大家好，我是IT修真院XX分院第X期的学员XX，一枚正直纯洁善良的XX程序员，今天给大家分享一下，修真院官网XX（职业）任务X，深度思考中的知识点——XXX
（1）背景介绍：
背景介绍的时候，尽可能的要宽广，讲清楚来龙去脉，讲清楚为什么会需要这个技术。
（2）知识剖析：
讲知识点的时候，尽可能的成体系，学会成体系的去给别人介绍知识。现在很多做的都是零散的，没有分类。
（3）常见问题：
最少列出1个常见问题。
（4）解决方案：
写清楚常见问题的解决方案。
（5）编码实战：
尽可能的去寻找在真实项目中在用的。如果你能找到某个网站在用你说的知识点，这是最好的。学以致用，否则当成练习题就没有意义了。多准备一些demo，讲解过程中将知识点和demo结合，便于大家理解所讲解的知识点。
（6）拓展思考：
知识点之外的拓展思考，由分享人进行讲解，这些东西就是所谓的深度，也是一个人技术水准高低比较的表现。
（7）参考文献：
引入参加文献的时候，在引用的句子后面加上序号【1】。参考文献中列出详细来源。不要去抄别人的东西，这是一个基本的态度。
（8）更多讨论：
Q1：提问人：问题？
A1：回答人（可以是分享人，也可以是其他学员）：回答
Q2：提问人：问题？
A2：回答人（可以是分享人，也可以是其他学员）：回答
Q3：提问人：问题？
A3：回答人（可以是分享人，也可以是其他学员）：回答
（9）鸣谢：
感谢XX、XX师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
【修真院WEB小课堂】课题名称请描述 BFC(BLOCK FORMATTING CONTEXT) 及其如何工作
大家好，我是IT修真院成都分院第16期的学员彭力，一枚正直纯洁善良的web程序员，今天给大家分享一下，修真院官网web任务15，深度思考中的知识点——BFC
（1）背景介绍：
文档流的时候其实分为定位流、浮动流和普通流三种。其中普通流就是指BFC中的FC。FC是formatting context的首字母缩写，直译过来是格式化上下文，它是页面中的一块渲染区域，有一套渲染规则，决定了其子元素如何布局，以及和其他元素之间的关系和作用。常见的FC有BFC、IFC，还有GFC和FFC。BFC是block formatting context，也就是块级格式化上下文，是用于布局块级盒子的一块渲染区域。
（2）知识剖析：
何为BFC
BFC（Block Formatting Context）格式化上下文，是Web页面中盒模型布局的CSS渲染模式，指一个独立的渲染区域或者说是一个隔离的独立容器。
BFC的特性
1.内部的Box会在垂直方向上一个接一个的放置。
2.垂直方向上的距离由margin决定
3.bfc的区域不会与float的元素区域重叠。
4.计算bfc的高度时，浮动元素也参与计算
5.bfc就是页面上的一个独立容器，容器里面的子元素不会影响外面元素。
哪些元素会生成BFC?
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex。
overflow不为visible
（3）常见问题：
1，外边距折叠,2，阻止文字环绕,3，清除内部浮动
（4）解决方案：
1，给折叠的元素其中的一个加一个父元素设设置overflow：hidden
2，给被环绕的元素设置overflow：hidden
3，给父元素设置overflow：hidden
（5）编码实战：
（6）拓展思考：
为什么用overflow触发而不用其他的？
因为其他如float,positon等等会影响布局,达不到我们想要的效果
（7）参考文献：
博客园-BFC
https://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
（8）更多讨论：
Q1：overflow的auto还是visible可以触发bfc?
A1：答：auto，hidden，scroll可以触发
Q2：auto和scroll有何区别？
A2：答：scroll选择该选项，则层内容无论是否超出层的范围，都会自动增加滚动条。
auto(自动): 选择该选项，，当层内容超出层的范围时，自动增加滚动条(默认)
Q3：利用浮动再触发bfc用来干嘛？
A3：答：用来实现左列定宽，右列自适应布局
（9）鸣谢：
感谢各位师兄，此教程是在他们之前技术分享的基础上完善而成。
（10）结束语：
今天的分享就到这里啦，欢迎大家点赞、转发、留言、拍砖~
请您登录 后进行评论
[成都|荣耀师兄]JS-黄武扬 发表于 2019-07-06 09:50:35 #1
知识点脉络清晰,代码实战合理充分
回复