尚硅谷前端基础 (68)

好，那刚刚呢，我们介绍了一下，用我们after这个伪元素来解决我们这个高度塌陷问题的一个，呃，一个一种方式吧，那其它的核心思想也并不难，其实就是通过after类向我们元素的最末尾最后边添加一个新的元素，哎，然后呢，它里面什么也没有，它不占地方，哎，但是把它转换成一个块元素，哎，然后让它去清除浮动对它影响，那这样的话，它的一个效果其实就是把这个元素它可以沉到所有的元素的下边，你上边有浮动元素，OK，它也是在最底边啊，在最里边，然后呢，哎，让它去撑起那个副元素的高度啊，整体来说就这么一个思想啊，利利用的就是我们一个after一个伪类啊，After一个伪类，那这里边呢，我们再来说一下啊，那这个呢，我们这是一种写法，这是用来处理我们这个高度塌陷问题的，那其实利用这个思想，我们其实还可以去解决一下什么呢？诶解决一下我们这个外。

编距的一个重叠的问题啊，我们来新建一个文件，我们来一个零八，我们来说一下我们这个，诶我们叫一个clear fix啊clear fix点一个in，这个是我们起这么一个名是吧？诶起这么一个名叫做一个诶清除浮动的这么一个修复的一个效果啊，我们来看效果，我们先写这么一个东西，呃，我先写一个div div呢，我们点一个BOX1，然后呢，这来一个点一个BOX2啊两个盒子，嗯，在这里边我们写点样式啊style标签标签啊，我们这是一个点BOX1 box1呢，White是一个200 head是一个200，然后background color background color，我们来一个井号，一个B飞，然后下边呢，我们是点一个BOX2 box2呢，我们这来一个这个Y，我们来一个100啊hat来一个100，然后background color background color，我们叫做一个这个orange吧，Orange啊orange，然后在这儿我们来运行一下，好，那现在呢，哎，绿的是我们box。

一啊，这个呢，是我们这个BOX2啊，两个元素啊，两个元素，现在呢，我给BOX2设置一个margin top，比如说我来一个100像素，那这时候很明显我们看到一个问题，哎，不是仅仅有BOX2移动，而是什么呢？而是BOX1和BOX2干嘛呀，是不是一起移动下来了，哎一移动下来了，那我们说了这个是我们垂直方向相邻外边距的一个折叠，那我们怎么解决这问题啊，之前我们说了它的构成要件主要有两个，一个是垂直方向二，一个是相邻的，哎相邻的对吧，然后外边距是没跑的对吧？一个是垂直方向外边距，还有一个是相邻的外边距，这两个要件缺一不可，那这个时候外边距我们肯定得用了，因为你要不用外边距，这问题我没没没有必要说了，对吧，外边距我们肯定是得用的，所以这时候我们的解决思路很简单的一个就是让他们两个不相邻，也就是说我的思路其实就是要用一个东西，把我们这个上边的外边距和我们这个下边的外边距给它。

隔开，那怎么隔开呢？诶其实我们想一下，诶，如果我们可以在我们BOX1和BOX2之间，也就是这个位置，也就是BOX1的最开始的位置，在这个位置添加一个新的元素，诶那我用这个元素把BOX1还有BOX2给它隔开，那隔开以后是不是就可以解决这问题呢？哎，那怎么想怎么能凭空往这儿添加一个东西呢？哎，我们是不是有一个比before那个元素啊，哎，所以这样写也简单，我们直接点一个BOX1冒号，冒号我们来一个这个before啊before选中前边，然后在这儿我直接来一个content，我随便写一个，我写1HELLO，那我们来看效果，那这个时候你看外边距还有没有折叠了，哎外边距这个时候就没有折叠，为什么？因为hello，是不是就变成一个这个，诶阻隔的一个作用，它把它的外边距，BOX2的外边距和box的外边距做了一个隔离。

这个时候就不相邻了，不相邻了，那也就不会说再出现这种重叠的一个现象，对吧？哎，那就是不是很完美的解决这问题，哎所以说什么完美什么玩意儿，你这玩意儿是不是都已经溢出了，哎对，为什么呀？哎，因为他是不是也占地儿啊，哎它也占地儿，所以这个时候呢，你设置了一个100，它就会多出一块，你跟你距离没有关系，因为这块内容是不是实际上没有用了，哎我们用它只是用来去隔离这个外边距的，你把它写到这儿了，哎它实际上会影响你整个一半的一个布局，哎，那我们就想了，那你就跟我们刚才那after似的，你这里面啊，你别写东西了，哎呀。别写东西行不行，哎，以为毕写东西，不写东西还不行，为什么呀？因为你不写东西是不是隔不开呀？哎，不写东西你隔不开，那怎么办呢？诶，那我们想一下，我换一下它的display，我把它换成什么呢？我把它换成一个block行不行呢？能不能隔开有没用？哎，没用，那我换成in line block能不能隔开呢？哎，In line block能隔开，但是你换成in line block，它是不是也会多出一个块来呀？哎，因为我们说了in line block你就当成一个字就完事了，所以这个时候它上边也会多出一个东西，也会导致你，哎多出一部分，所以in line block也不行，那要用什么呢？哎，我们有一个直接告诉你了，最好的选择，我们直接display是一个table table的好处就是table可以隔开我们这个两个外连距，并且呢，它本身你因为是空的嘛，它本身还不会占位置，所以你只需要把它设成display table就可以完美的去解决这问题。你看这边上。

是不一点也不多，一点也不少啊，哎，所以这个的话跟我们刚才那个after的原理基本上是一个类似的，只不过这个是用来解决我们这个外边距重叠的，而那个after是用来解决我们那个那个高度塌陷的啊高度塌陷的，所以我们会出现这么一段代码叫什么呢？你写上啊，叫做一个点clear fix啊clear fix，那注意了，Clear fix是一个类名，因为前面加了一个点嘛，啊clear fix我们来一个冒号冒号，冒号冒号我们来一个before，然后逗号和clear fix，我们来一个after after，哎，然后我们这直接来一个content，这来一个空的内容，然后display，我们来一个这个table table，然后我们再来一个可粒一个bos，那这个就是我们最终的一个版本的一个clear fix代码，那这什么作用？首先看看上边clear fix冒号，冒号一个before，这是一个选择器，是不是选中这个元素的？

前边啊，Fix冒号，冒号一个other，这是一个选择器，它选中的是我们这个元素的后边啊，一个选中前边，一个选中后边，也就说我既选中了开始位置，又选中了结束位置，那content呢，表示我添加一个空内容啊空内容，然后display table是干嘛的，把它显示为一个。

哎，表格，那这里边你先不看它，你先不看这个东西，不看这个东西，那我上边这个代码实际上跟谁呢？跟他是一对的，这两个代码加一块实际上是解决我们的外边距的一个重叠问题啊，外边距重叠问题，然后呢，下边我们又加了一个可boss啊可boss那这三个实际上他们是一对的啊，这个他们是一对的，他们什么呢？它是用来解决我的这个高度塌陷的问题的，诶有同学说了，老师你高度塌陷这不应该是display block吗？哎，Display block可以解决高度塌陷，Display table也可以解决，但是呢，Table的好处是table既可以解决高度塌陷，又可以解决外边距重叠，所以我们等于是把我们刚才写那个阿和我们刚才又写的这个笔赋两个给他合并到一块了，所以这个时候我们这个。Clear fix啊，我们说了这个样式，这个样式可以同时解决我们这个高度塌陷和什么呢，和我们这个哎外边距重叠的问题，所以它有什么用，哎，所以当你诶在遇到什么呢？诶遇到这些问题时啊，这些问题时。

直接什么呢？诶直接诶使用我们这个可粒fix啊这个类即可啊，那这东西是干嘛的啊，说白了就是写了这么一个样式，这个样式是干嘛的呢？就是用来解决我们高度塌陷还有外边镜重叠的，那比如说你像这种情况，我BOX1这是不是高度塌陷了，我把这先住了啊，我现在这不是不不是高度塌陷，它是一个外边距重叠了，它是不是重叠了，重叠怎么办？你直接你有了可fix这个类以后，直接给BOX1添加一个可fix，这时候它就会自动解决这个重叠的问题，同样如果你高度塌陷了，也可以加一个可fix，它也可以解决，所以它是一个多功能的一个什么呢？它是一个这个多功能的一个这个哎一个类啊，可以同时解决高度塌陷。还有一个。

会给你中间问题，如果你不理解，你就把这个类给它记住了啊，以后需要写的时候给它写上就可以了，那这就是一个比较较经典的一个代码了，这个代码我记得应该是已经有有很多很多年了，是吧，它的作者是一书叫做CSS权威指南这本书的一个作者，他所设计这么一个类，这个类的目的就是专门解决我们这个高度塌陷，还有外边去重叠的，所以如果你不理解，没关系，把这个类给它记住了，用的时候你直接你知道它在什么场景下需要使用就OK了啊好，那这个是我们最终的一个版本的一个可粒fix，一定要知道它的作用，不理解就给它背下来啊，给它背下来，好，我们先说这么多，停一下。