055 - 终于有人可以把BFC给讲清楚了
本帖最后由 不二如是 于 2020-11-3 08:51 编辑上一集： 054 - 不畏浮云遮望眼
哈哈，废话不多说了，#敲黑板时刻！{:10_281:}
在线视频：传送门
课程思维导图
猛戳http://xxx.fishc.com/forum/201803/31/110408mxpszds1j1xxxahm.gif超清
这节课的重点就是 BFC(Block formatting context)直译为"块级格式化上下文"。
它是一个独立的渲染区域，只有块级盒子(Block-level box)参与（后续有解释）。
规定了内部的 Block-level Box 如何布局，并且与这个区域外部毫不相干。
通俗理解就是小甲鱼老师说的“平行宇宙”。
BFC 其实就是 css 布局中的一个概念，是一块区域，一个环境。
触发条件：
[*]根元素，即 HTML 元素
[*]float 的值不为 none
[*]overflow 的值不为 visible
[*]display 的值为 inline-block、table-cell、table-caption
[*]position 的值为 absolute 或 fixed
其中最常用的方式就是设置 overflow，也是课程中小甲鱼老师惯用的生成 BFC 方式。
通过 BFC，我们可以做这些事：
[*]自适应两栏布局
[*]可以阻止元素被浮动元素覆盖
[*]可以包含浮动元素——清除内部浮动
[*]分属于不同的 BFC 时可以阻止 margin 重叠
代码大家自己看视频，一定要手动敲！
重点：
BFC 就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
看懂这句话，基本上就理解了 BFC 。
小甲鱼老师课程中举的例子，都是因为 BFC 内部的元素和外部的元素绝对不会互相影响。
因此， 当 BFC 外部存在浮动时，它不应该影响 BFC 内部 Box 的布局，BFC 会通过变窄，而不与浮动有重叠。
同样的，当 BFC 内部有浮动时，为了不影响外部元素的布局，BFC 计算高度时会包括浮动的高度。
避免 margin 重叠也是这样的一个道理。
课后作业，完成了吗？
传送门
http://xxx.fishc.com/forum/201803/20/101934b3igkgm9hgbgz0ck.gif
下一集：056 - 苟日新，日日新，又日新
如果有收获，别忘了评分{:10_281:} ：
http://xxx.fishc.com/forum/201709/19/094516hku92k2g4kefz8ms.gif
这位鱼油，如果喜欢本系列学习笔记，请订阅 淘专辑（传送门）（不喜欢更要订阅{:10_297:} ） Mark 学习了{:10_333:}。
但我有点笨，理解了又好像没理解。在我现在看来我建一个新的BFC的目的是为了避免另一个BFC对布局的影响，为了使某块内容不受别的BFC影响，所以要给这块内容也处于BFC内。
页:
[1]