尚硅谷前端基础 (65)

好，那刚刚呢，我们介绍了一下这个BFC啊，当然我们刚刚介绍这个BFC呢，主要是为了解决这个高度塌陷问题，那么我还是再强调一点啊，BFC，呃，当我们这个元素开启了BFC以后，就相当于是什么呢？相当于这个元素它变成了一个独立的区域，这个时候它的布局的一些特点就在它自身之内进行去计算，就是不再去跟外边元素再去像什么那种，呃，文档流啊什么那种去计算了，它就是在内部去计算了，就是说哎，我内部的元素是一回事，我外部的元素又是。又一回事，所以开启完BFC后，很简单的理解就是开启完BFC以后我就分什么呃，分内外了，对吧，内部是一套系，外部呢又是一套体系，那总的来讲就这三点，开启BFC以后，我们元素会具有三个特点，第一个诶不会被浮动元素所覆盖，第二个子元素和浮元素的外边距不会重叠，第三一个啊可以包含浮动的子元素，第三点我们就不再强调了，我把这两点我们再去演示一下啊，演示一下，其实这演不演示都行啊，你自己做一下也行，但是我们还是演示一下吧，啊我们来一个零五，哎，我们这说一下BFC啊，点一个这个HTM，呃，在这呢，我们来写一个页面的一个结构，在这里边我们写一个这个点一个BOX1，呃，然后呢，呃，在下边我们再写一个点一个BOX2，呃，在这里面我们给它右键运行一下。

好，运行起来，当然现在什么都看不见，因为我们还没有给它设置样式，那接下来我们来给它设点样式啊，我们直接点一个BOX1外呢，我们来一个200T来一个200，然后哎，Background color background color，我们给它来一个井号，一个B，然后下边一个是我们点一个BOX2 box2同样也是200，是一个200，然后我们给它来一个orange orange，好设置完了以后，那现在我们两个元素一个是一，一个是二，那这个时候我们让一向左浮动，Float left，那这里面我们发现一个结果，就是当我的BOX1向左浮动以后，由于它从文档流里边脱离了，那么它下边的元素BOX2是不是自动上移，上移以后由于它跟BOX1一边大，所以BOX2就等于被BOX1给盖住了，那盖住了，这个时候我们说了，诶，那这就是一个正常情况。

对吧，正常情况，那现在我想干嘛呢？我不希望我的BOX2被box c盖住，那这个时候我就可以给BOX2开启BFC怎么开启，开启BFC的方式有很多，我们可以直接用一个float left的，是不是浮动也可以开启啊，但是浮动的话，其实我们之前已经看过了，我就不不拿浮动演示了，我们拿谁呢？我直接用我们的overlo黑，也就是说我给box尔加上一个overlo黑的这个属性，看上去跟我们这东西似乎是没有什么太大的关系，但是其实我们加完了以后，我们来看效果，这一加我来看效果，这个时候你再看二还有没有被一盖住，没有被一盖住，诶，那你如果不知道BFC的话，你在这就会觉得很奇怪，哎呀，我设置一个overflow hidden overflow hidden是用来裁剪溢出内容的，那怎么一设置完它它就跑这儿了呢？诶，为什么？就是因为over黑的实际上它开启了BOX2的一个BFC开启。

比BFC以后，我们的元素就是具备这样一个特点，什么样一个特点，就是不被那些浮动的元素所覆盖，所以就跑到这个元素的边上，其实你想象一下，其实我们设置我们这个float left，设置完浮动以后，这元素是不是也会跑这儿来了，哎，那为什么会跑这儿来，那其实一部分原因也是因为因为浮动以后它开启了元素的BFC，好，这一块不多说了。

再往下看啊，再往下看，下边呢，我们在这儿创建一个div，点一个BOX3 boxs3呢，我现在不让BOX1浮动了啊，BOX1不浮动了，然后在这里面我们来设置一下，点一个BOX3的一个样式，BOX3我们来一个100，来一个100，然后background color呢，我们给它来一个这个yellow黄色的包括三，那现在呢，我们给它设置一个in top来一个100像素，我希望把它往下100，但是这个时候你会发现其实不是BOX3往下走了，而是BOX1往下走了，为什么呢？就是因为三和一他们的外边距发生重叠，子元素的外边距传递给了负元素，那这里边我们还可以干嘛呢？我直接给负元素开启BFC，这时候再看，你看还有没有重叠的现象了，没有了啊，这个时就不会发生外面重叠，也就说这时候我的BOX3的marin top只对它自己启动，对BOX1还有没有用了就没。

用了啊就没用了，所以这也是刚刚我们说到的开启相对定位的三个特点啊，第一个不会被浮动元素所覆盖，第二个诶，不会外边距重叠，第三一个哎叫做不可就可以包含浮动的一个子元素啊注意了这些特点，我们说的是只要是开启BFC了以后就具备的这些特点啊，只要你开启了BFC，它就会具备这些特点，那至于你是用什么东西开的BFC，你是用orflow，你还是用lo left的，你还是用display in line block，你用什么都无所谓，只要你开启了BFC，它就会有这些特点啊，有这些特点，那么有多少种方式会开启BFC吗？那可就。太多太多了啊，就太太多了，我们来看看啊，看看这能不能找到，打开我们这个CSS的文档，我们看看。

CSS它这块应该会有一个。我们直接搜，诶在这儿就在这个选项，在这儿有一个叫做这个这个这个单词是吧？点进来以后，它会有一个料out布局这块，布局这块它会有一个你看这是盒子模型的对吧？这是关于盒子模型的，然后这个叫做一个block for maring context啊就做BFC，你直接点开，那这里边就是介绍BFC的一个一个方式啊一个方式，那这个是什么呀？呃，什么是介绍对吧，介绍的BFC，然后再往下。嗯。叫什么呀，一个BFC，它被创建通过什么呢？通过下边的，诶，任意一种方式啊，下边的任一种方式，你看叫什么root element啊，也就是root它们的根元素，也就是我们的HTML，它自带什么，自带BFC，诶或者什么呢？或者是浮动元素啊，浮动元素也就说你的flow的值不是nu的，也会开启BFC，下边什么绝对定位元素，什么in line block，什么display，设置为table display设置为table，什么display等等等等，下边是不是都给你列全了，哎，都给你列了，但是我也说了，每一种多多少少会有一些副作用，而我们讲的那种，哎，这有没有看看写不写。

它肯定得写对吧，Overflow block elements where overflow has value other than visible，也就是说你的overflow的值不是这个visible在这儿是不是都可以看到啊，大家都可以看到啊，所以这些是我们全部会开启BFC的一个方式，但是我们不用去记，你知道有就行了啊，你知道有形了，也就是说很多方式都可能会开启BFC，开启BFC以后元素会发生一些小的变化啊，一些变化会具有一些新的特点啊，新的特点好，那然后的话，其实这里边的东西还挺多的，感兴趣可以看一下上有什么，呃，核模型对吧？核模型还有像什么我们的呃，包含块啊，包含块后边我们还还会说对吧？还会说啊，那这里边我们就现在就不一个个说了啊，不一个说了可以自己去看一下，当然主要就是还是先看这个BFC的啊，BS主要就看一下它的一个方式，但是后边它还会有一些这个介绍，你可以看一下，这里边介绍的其实也会挺全面的。

啊挺全面的，好，那这个是我们关于BFC的一个介绍，我们先说这么多听一下。