尚硅谷前端基础 (66)

好，那么刚刚我们介绍了一下这个BFC，简单过了一下，但是呢，也是我们去引出这个BFC，主要其实目的还是一件事儿，为了解决我们这个高度塌陷的问题，但是我们刚才也说到了BFC它是一个隐含的属性，它不能直接去开，它都是通过某些属性间接的去开启BFC的，所以我们这些所有的开启BFC方式，多多少少它会带有一些隐患，哎，像lo，哎，像比特in line block，像我们的这个overflow hidden overflow hidden，它只是副作用最小的一种，但是实际上它也存在有很多的这个副作用，只是现在我们暂时还遇不到，往后我们随着使用，我们还会看到这些副作用，那这时候其实我们就想着，我们就希望有一种方式啊，我们可以有什么呢？我们可以有最小的副作用，然后呢，还可以。

你同时满足我们这个需求，那这样是不是最好的？哎，所以这个时候我们要用一种更加完美的方式去解决我们高度塌陷的问题，哎，在这里我们还是来新建一个文件，我们叫做一个零六，我们先说一个属性，我们叫做一个颗粒。嗯，Clear clear是干嘛的呢？哎，Clear我们来看一下啊，我们在这儿呢，先写个页面结构，然后呢，在这里边我们来一个点一个BOX1，加上一个点一个BOX2，再加上一个点一个BOX3啊我们创建三个，诶BOX3那这块啊，我们使用这种快捷方式创建的时候，我就犯了一个错误，我们这应该是连着写啊，不要写这个这个空格了啊box一点box2.1个BOX3啊回车创建三个盒子啊，三个盒子，然后style标签，我们来给他们设置样式啊，直接点一个BOX1，然后逗号点一个BOX2，然后逗号点一个BOX3 box3呢，我们先给他们设置一个这个大小啊，诶这还不能这么设置，我们这样吧，我还是一个一个设置啊，我直接来一个width啊，我来一个这个。

来一个这个200个像素啊，Hi呢，也是一个200个像素啊，然后我们这个background color background color，我们来一个井号一个B设置好啊，然后给它运行出来。现在呢，我们这儿就有一个BOX1啊，然后二啊，我们先注掉，我在这儿呢，就来看三点，一个BOX3 box3呢，Y也是一个200，然后呢，也是一个200 background color background color，我们来一个orange啊orange，那现在这么一个关系啊，这是一，这是三啊，我写什么？这是一个一，这是一个三啊BOX1还有BOX3啊，那这里呢，我可以把这个字给它设置稍微大一点，Div，然后呢，我们这直接来一个放size，来一个50像素啊，把它给整大一点，好，这是我们BOX1，这个是我们BOX3，那现在注意了，我要做一件事儿，我现在干嘛呢？哎，我要让BOX1浮动，哎，我让BOX1我来一个float left向左浮动，那向左浮动以后，很明显我们BOX3是不是就就上去了，哎就上去了啊，当然这个三上不去，因为三属于文字，文字会自动的环绕在浮动元素的周围。所以这。

这个时候三我们看到的话是没动，因为它会自动环绕在周围啊，但是我们那个元素本身实际上是不是已经被boss给盖住了啊，给盖住了，为什么盖住了，还是这个原因，因为什么，因为BOX1。浮动了，浮动以后脱离文档流，它脱离文档流以后，这个元素是不是自然而然就往上走了，哎往上走了，也就是说我们这说一下由于什么呢。

由于BOX1的一个浮动，哎导致什么呢？导致我们这个BOX3，哎位置干嘛呢？哎位置上移啊位置上移，哎也就是什么呢？也就是我们这个BOX3。受到了什么呢？受到了BOX1浮动的一个影响，哎，然后呢，位置发生了改变啊，位置发生改变，所以这个时候BOX3为什么会往上走，就是因为它受到了BOX1浮动的影响，BOX11浮动，BOX3就往上走了，那这时候我们希望什么呢？哎，那如果什么呢？如果我们不希望哎某个元素，哎，因为什么呢？诶，因为其他元素浮动的影响而什么呢？而改变我们这个位置则可以什么呢？哎，如果我们不希望某个元素因为其他元素浮动的影响而改变位置，我们可以什么呢？我们可以。

哎，我们可以通过我们这个clear属性来清除我们浮动元素对当前元素哎所产生的一个影响啊，产生的影响，所以这个时候我们就要说的叫做一个可粒尔，可粒尔这个属性它什么作用，它的作用就是清除我们这个浮动元素，浮动元素对我这个当前元素所产生的影响啊，清除浮动元素对我当前元素所产生的一个影响，它有哪些可选值啊，它跟我们这个浮动元素那个差不多啊，跟我们的floatg差不多，它有什么呢？有颗粒，哎有这个叫做left啊，Left清除我们这个左侧浮动元素，哎，对我们这个当前元素的一个影响，还有什么呢？哎，Right叫做清除我们这个右侧浮动元素对我们这个当前元素的一个影响。

那很明显，我们这个BOX1现在float left，它是不是向左幅的，哎，所以如果你的BOX3不想受到BOX1的影响，在这儿可以直接写一个clear left，哎，Clear left，那这样的效果就什么呢？哎，你来看BOX3还有没有上去，还有没有上去，没有上去了自然而然就就下了，那这个时候注意并不是说我设置完了可列life的BOX1就不浮动了，BOX1依然浮动啊，BOX1依然浮动只是什么？只是BOX3不再受到它浮动的一个影响，也就是说BOX1对于BOX3来说压根就没有浮动，就摆在这，但是实际上它已经浮动了，只是我的BOX3不受到BOX1的影响，所以注意我这个属性会不会改变，BOX1不会，它影响的只是BOX3，哎，所以你设置完可life以后，三就不再受到一的影响，诶这东西。

好神奇啊是吧，他是怎么做到啊，他是怎么做的，怎么就能让我们三不受到一的影响啊，怎么让三我们说不受到一的影响，所以这个时候我们直接来说一下结论，它是什么原理，其实它的原理非常简单，原理哎我们其实很简单，就是设置我们这个清除浮动以后啊，浮动以后诶我们的什么呢？我们浏览器会自动为诶我们这个元素添加一个什么呢？上外边距啊以哎使其干嘛呢？哎，使其位置不受影响，哎，不受。哎，我们这个其他元素的其他元素的影响啊，什么意思，那现在本来说我们这个box斯还是不是应该往上拱上去了，哎，拱上去了，但是呢，由于我设置了clear life的，它不能拱上去，所以浏览器会自动算，算什么，算一下BOX1有多高，因为它只是上下影响嘛，对吧，有多高它多高，200像素也没有什么边框，也没有什么内边距，没有什么外边距，那就是一个200像素，那么OK，我就直接给我的BOX3设置一个margin top是一个200是BOX3自然就下来了，所以原理它实际上是通过外边去去实现的，但是这个东西如果你通过我们开发者工具看的话，你实际上你在这看呀。

你看不出来，因为它不会给你显示，但是原理上其实就是通过这加了一个尾变距啊，你要知道这个原理好，那接下来我们再看啊，那现在呢，我把这个BOX2啊，我给整出来啊，BOX2给整出来，然后呢，在这我们设置一下BOX2CTRLCCTRLV，这来一个400，这来一个400，我让BOX2呢，Fla一个RG啊Fla一个right颜色，我换一个颜色，换一个FF0换一个黄色，那这时候我们来看效果啊，来看效果。

嗯，我们来看啊，这应该是BOX2，哎，那这里面注意了，这个是BOX1，这个是BOX2啊，我把二写上。这是一，这是二，一也浮动了，二也浮动了，哎，但是你看啊，实际上如果我不让BO3可粒尔，那这个时候Bo告三实际上是不是又被一盖住，那实际上这个时候BOX3受到了两个元素浮动了一个影响，受到本来说它应该在哪，本来一在这儿对吧？哎，然后二在哪呢？二在这儿，然后三是不是本来应该在这儿啊，所以这个时候由于一浮动，二也浮动，那这时候我们BOX3是不是就跑跑这来了，哎，也就是说现在我们的BOX3实际上它受到了两个浮动的元素影响，一个是BOX1，一个是BOX2，那这个时候我设置了一个可left，这叫什么？叫做清除左侧浮动元素对它的一个影响，那这个时候它是不是就跑跑这儿来了，哎，跑这儿来了，那这时候我想清除BOX2对它的影响怎么办呢？哎，我可以用一个可一个right，哎。

哎，这叫什么呢？叫做清除我们这个右侧浮动元素对我们元素的一个影响，那这个时候你来看BOX3是不是就跑到了这个二的下边了，哎，所以是清除那个左侧的，而right是清除右侧的，那这个时候根据需要去选择就完事了，然后还有一个我们叫做一个both啊boss叫什么呢？诶叫做清除两侧中，诶boss啊，Boss不是清除两侧，它是什么呢？Boss是清除两侧中最大影响的内侧啊，最大影响那个侧，那这时候注意，现在我如果是life的是清除的我们一，实际上它给三就等于设置一个什么呢？设一个这个社会边距就往下走了啊就往下走了，如果我是right的话，那就清除右侧，右侧的话，其实原理就是它给它设置了一个上来边距啊，是二这么大个啊，那就把它给挤下来了，是这么一。

效果啊，这么一个效果，那如果我写boss呢，注意boss不是说两次全都清boss什么意思？Boss是清除较大那个侧，你看我一写boss跟我写right是一样的，为什么？因为我如果清除它的话，我外边距是这么大，我清除它的话外边距是这么大，那是不是两种情况呀？那我清除谁？如果你写left的就清除左边的，Right就清除右边的，而如果你写boss，那看这两个值谁大，一大那它的就清除一的，二大就清除二，所以boss是清除两侧中最大的那一侧啊，最大那一侧，那这里边我们就可以干嘛呢？诶那我们可以改一下，我把BOXS2啊改小点，BOXS2改小点，它的产生的影响是不是也小了，诶我把BOXS2呢改成一百五高度，那这时候你再看再清除就清除去了，清除一的了啊，所以boss就是谁大就清谁啊，谁大就清谁好，那这里边是我们说的一个这个。

可这个属性它用来清除我们这个浮动元素对当前元素的一个影响啊影响，那这里呢，我们先说这么多，那说这个什么目的，说这个的目的其实是为了解决我们这个高度塌陷的问题，诶那你先把这个属性看一下，然后呢，也可以顺便去思考思考我怎么能通过来。解决我们这个高度塌陷的问题，并且它所产生的副作用还会比我们之前那个方式要要小，诶这个要怎么实现好，我们先说这么多，停一下。