14.尚硅谷_css2.1_BFC是什么.wmv原创

嗯，剩下的时间来阐述一下BFC的概念啊，大家之前都有听过BFC吧？呃，在哪一块听说过BFC？高度塌陷是不是啊？是不是马in塌陷那块用BFC来解决过啊，是不是啊？那BFC到底是个什么东西？是不是好像对它没有什么太大的概念啊，是不是？那讲BFBFC之前先抛给大家一个概念啊，BFC就是一套规则，浏览器的规则懂不懂？好，我们来看，你可以把表层理解成是一个对象。啊，这个待会来讲，来看一下什么是BFC，好，我的课件在什么？在这个BFC里面，好在解释BFC是什么之前，首先我们需要知道两个概念，什么叫books，什么叫form context，好，这两个是什么意思？Books CSS，布局的基本单位，我们布局都靠盒子。是不是会计盒子，行内盒子？呃，内联盒子是不是个性样的盒子吧，绝对定位的盒子，浮动的盒子吧？都是盒子吧？好，盒子是我们CSS布局的一个基本单位，好，OK books是CS布局的对象和基本单位，直观点来说就是一个页面是有很多个books来。

组成的好，以下的几句话比较重要。好元素的类型和display display属性决定了这个books的类型，不同类型的books会参与不同的form什么意思？不一样的books你不一样的盒子，在我的浏览器里面是有不一样的，在我的浏览器里面是有不一样的容器来管理的。有吗？好，OK，好，因此box内的元素会以不同的方式渲染，让我们看看有哪些盒子好，会计盒子。Display display属性为broke this item table这两个就不用管了，用的已经不是很多了，就给我搞清楚什么？Broke能明白吗？这些都叫快集合制，参与block for meeting content的管理，这个是什么？

BFC，把它们的首字母拿出来，这个就叫BFCBFC是什么？是一个容器，这个容器来决定什么，这个容器来决定会计元素在我的整个浏览器里面怎么去渲染，能明白吗？OK，那有BC就有什么。IC，你看Dis display属因为inline inline block inline table的元素会生成inline级别的books，能明白吗？这些books参与什么阴line和面管理，这叫什么？If FC，一个叫做PFC，可是为什么你们到现在用的最多是BFCFC，在社区里面，或者在我们任何的论坛里面，你压根都看看见不到有人讨论它。第一个浏览器厂商维护的规则不一样，第二个我们昨天讲过了，布局叫div加CSS布局，能明白吗？就是说我们只用管什么是b FC if的规则，一套浏览器一套规则，一套浏览器一套规则，没有必要去把它搞懂，也不要去去浪费这个精力，能明白吗？FFC不重要，所以说我们基本不讨论，可是你得知道BFC的所有的规则，懂吧。好，我们来看一下BFC到底有哪些规则，好form cons，好form cons就是我们一个什么渲染的什么上下文啊，你可以理解成一个渲染的上下文，明白吧，就是一个容器，好，它是W3CCSS2.1规范中的一个概念，它是页面中的一块渲染区域，并有一套渲染规则。它决定了它。

它的子元素将如何定位，以及和其他元素的关系和相互作用，说白了一句话，Form面肯是决定了它管理的盒子在浏览器里面应该怎么去排布，它的特性应该是什么样的，都靠肯德值来管理，懂不懂OK，最常见的有BFC跟。FFC，我们需要需要知道的是BFC，好，我们来看一下BFC是什么啊？刚才已经说过了，BFC直译为会计格式化上角文，懂不懂以后出去面试的时候问你BFC是什么，不用反复就会把会计格式化上下文你会挨揍的，能明白吗？你要把什么这些规则跟他说出来明白白吗？来看一下，好，呃，BFC是一个独立的渲染区域，它只有会计盒子才会参与，它规定了内部的会计构置应该如何的布局，并且与这个区域外部毫不相干。好，我们来看看它的规则，好看第一个规则大家熟不熟？内部的box会在垂直方向一个接着一个的放置，什么意思？

会计元素独占一行，谁的规则？BFC的规则为什么会计元素上来就能独占一旁？是不是说明我们页面一上来就应该有一个BFC容器？

是不是好，来看一下BFC什么时候出现，哪些元素会生成BFC。第一个就是。跟元素，你上来写个HTML标签，问你页面上有没有一个BFC容器了。有没有了，只要你是我HTML元素的子标签，那都是我BFC的管理，能明白吗？我问你，如果我现在页面上有一个SPA元素，这个SPA元素受不受BFC管理？瘦不少，想想好瘦不瘦，瘦吗？如果瘦的话，为什么SPA元素没有独家银行？想一想，我们说BFC，它是管理会计元素。你的span是一个内敛元素，内敛是受谁管理？FC管理不要考虑这事情能明白吗？比就说为什么SPA没有国家银行，就是因为他没有受到BFC的管理，懂吗？BFC只管理啊会捷元素，而且我问你好，现在我根元素是不是开启了一个BFC啊？我跟元素是不是BFC的管理啊？

好比我现在开启了一个新房啊，新房是什么啊？这个新房是不是啊，你喜欢的人是不是可以住进去啊？你自己能不能住进去啊？好像也可以是不是啊？呃，有点尴尬，好，那那就不举这个例子啊，大家大家可以来看啊，如果你的display为依赖不洛克，它也是可以开启BFC的，可是依赖不洛克的元素受不受BFC管理。是不是就是，哎，虽然说你应量不认可以来开启一个BFC，可是你开启出来这个BFC管理自己吗。不管理，它是用来管理它里面的会计元素，这跟你给我分清楚好不好？虽然说依赖可以来开启PC，可是它是没有办法管理音量元素的，能明白因为什么样的上下文就管理什么样的元素。BFC就是用来管管理什么会计元素的，能明白吗？然后呢，FC就是用来管理Z点跟行内元素的。

懂吗？好，那这就是两个什么？两个比较重要的概念，什么是BFC，什么是FC？那这边的规则我们是不是到现在只说了一个内部的box会在垂直往下一个接着一个方向啊，这个规则应该没有问题吧？好，底下的四条规则我们待会一个一个的来验证好不好？首先你们得知道BFC是什么，它就是一个容器来管理，谁管理快减速啊。