尚硅谷前端基础 (67)

好，那刚刚呢，我们说了一个叫做clear啊，它是用来清除浮动元素对我们当前元素的一个影响的，那么接下来呢，我们就来利用可诶来处理一下我们这个高度塌陷的一个问题。那在这里我们来新建一个文件，哎，那这个呢，是我们说的一个叫做一个高度塌陷的一个最终方案啊，最终方案，最终的一个解决的一个方案。那这种方案呢，哎，接下来我们要说的这个方案呢，就是基本上就是一个呃，比较完美的方式吧，哎，它基本上没有什么副作用啊，没有什么副作用，好，那这里呢，我们来写一个，嗯，我们先写一个。先把我们这个高度塌陷在问题啊，我们先给你写出来啊，BOX1，然后我们这来一个BOX2啊，一个BOX1里面一个子元素叫BOX2，然后呢，在这儿我们来写点样式啊，Style标签，Style标签我们这直接是一个点BOX1 box1的话我们就简单一些，它只有一个border啊，比DR我们来一个十个像素，然后来一个这个red，然后来一个solid，嗯，右键我们直接给它运行一下。

哎，运行出来以后，它是这样子的，然后呢，在这我们直接点一个box box2 box2呢是100是一个100，然后background color background color，我们来个井号，一个BFV，那现在呢，BOX1我们没有设置宽度，也没有设置高度，那么它的高度实际上是由这个BOX2撑开的，换句话说，现在的情况是BOX2多高，BOX11旧多高，那当我们给BOX2设置一个浮动以后，我给BOX2我来一个float的life的向左浮动，那这个时候由于BOX2脱离了文档流，脱离文档流以后，那就无法撑开我们这个BOX1的高度，对吧？这是我们重现一下高度胎的问题，当然之前我们的解决方式，你直接用overflow黑的开启BOX1的BFC就可以很简单的把这问题解决了，但是这个问题，这种方式是通过开启BFC来解决问题了，它实际上还存在有一些缺陷。

或者说还存在有一些不足，这个缺陷在这里边，或者说在很长，呃，它不是一个非常容易出现的一个问题，就说它可能只是在某一些特定的场景，或者叫做特定的情况下才会出现这个问，所以我们看见的几率并不是那么的大，所以一般情况下我们就用欧就可以了，但是诶，那我们作为一个什么呀？诶作为一个比较讲究的一个程序员是吧？诶我们都是比较追求那种完美的，那所以我们就需要一种更加完美的方式，它在任何情况下都不会有副作用，那这要怎么办呢？诶欧洲弗罗黑带我先给它煮掉。那好，那现在注意了，我们BOX1的它的高度本来是被我们BOX2撑开的，但是呢，由于啊，由于什么呢？由于我们这个box脱离了文档流，它就撑不开它的高度了，所以高度就塌陷了，对吧，那我就想了，现在呢，BOX1里边只有一个子元素，也就是BOX2啊，只有一个子元素BOX2，那么。

BOX21浮动，那BOX1自然就塌下了，是吧？就像现在这种，呃，现在很少是吧，之前有很多这种叫独生子女的家庭啊，可能只有一个孩子，那那个孩子结婚了，走了，那这个时候你家里就剩父母一个人是吧？父母就会很寂寞，哎，但是呢，我们怎么有效的解决这问题呢？诶如果诶我生了两个孩子，我生了三个孩子，那走一个，我还有一个对吧？诶再走一个，我还有一个，也就说我是不是虽然有一个孩子离开了我，但是其他的是不还可以陪在我的身边呀？哎，那这就是孩子多的一个好处，那同理，现在BOX1的高度是被BOX2冲开的，哎，那BOX21走，BOX1就塌陷了，因为BOX1里边是不是只有一个孩子就是BOX2啊，哎，那好了，那现在呢，假设我们这个box里边，我们还有一个div，我这叫一个BOX3 box3我也给他写一个样式啊，那现在注意了，BOX3我先不写样式。

直接写一个写一个AA，那注意了，你看现在注意box浮动了，但是BOX3有没有浮动，没有浮动BOX3还在文档流中，所以这个时候你来看我的BOX1它的高度有没有，哎，有这个时候它的高度是被谁撑开的，哎，是被我们这个BOX3撑开的，所以有了它以后，其实就会有一个特点，就是说虽然BOX2没有办法撑开BOX3的BOX1的高度，但是BOX3是不是是不是可以，哎，可以，但是问题又来了，BOX3确实可以撑开它的高度，但是它也有一个问题啊，你现在BOX2不还是溢出了吗？对吧，不还是溢出了吗？也就是说你现在。

你的BOX1有没有把BOX2给装下，没有，诶有同学老师你给BOX3设置一个高度不行了吗？你给你来一个点一个BOX3，咱们给它来一个height，来一个100，你设置一个高度，那这样是不是就行了？哎，注意现在看看为什么复元素高度撑开了，是不是因为BOX3有一个高度是100啊，哎，那我们想想这么写能不能解决这个问题。很明显不能解决的问题。为什么呢？因为。我们把这he写到BOX3，这跟我写到BOX1，这有没区别，现在来看是没有区别的，你无论写到哪，我们希望的效果是，如果你BOX2的高度变了，比如说BOX2高度变成200了，那这个时候你一的高度也变200，但是我这种写法，一的高度会不会跟着变，不会跟着变，它实际上就固定到100了，你这BOX3写多少它就是多少，所以这种方式不行，你不能把BOX3的高度给他写死，不能写死啊，不能写死，哎呀，那怎么办呢？我们想一下。

这事要好好设计设计，怎么去解决这问题呢？我们想一下，现在呀，我们BOX3本来应该在哪，BOX3是不是本来应该在BOX2的下边，是应该在这个位置，哎，本来应该在这个位置，但是由于BOX2的浮动脱离挡流了，所以导致BOX3位置是不是移动到这儿来了，哎，移动到这来，那我们想一下，如果说BOX3没有受到BOX2的影响，那么BOX3是不是应该在这个位置，哎，那好了，我问你了，BOX3在这个位置，那么我们的BOX1它是不是应该去适应box的高度，因为BOX3可没有脱离文档流，所以这个时候如果BOX3还在这的话，那么应该来讲，BOX1是不是高度应该自动改变，变到这个高度，它就可以把我们这个BOX3给它包裹起来了，哎，给包裹起来了，那问题来了，那所以其实现在如果你希望你的BOX1的高度是这样的，那其实你只需要让什么呢？让。

BOX3是不是来到这个位置就行了，对吗？来到这个位置，那怎么让BOX3来到这个位置，哎，那实际上这个位置就是BOX3没有受到这个浮动所影响的一个位置吧，哎，所以你要实现这个很简单，你直接点一个BOX3来一什么呢？来一个可一个boss，哎你用click也行也行是吧，但是这clear个boss就都清了，那这个时候你注意现在，你现在看BOX3是不就跑这儿了，哎，BOX3跑这不重要，由于BOX3跑这，而再加上BOX3它并没有脱离文档流，所以这个时候我们的BOX1是必须得把BOX3给包起来，那包起来，那这个时候你看BOX1的高度是不是就就有了，并且这个时候它是不是就可以跟随BOX2的改变，这的高度也可以一起变了，诶我们来看一下啊，我高度改成。

200。诶，你看一是不是也高了，高度改成300，一是不是也高了，哎，一定注意我这个东西是不是是BOX2把BOX1给撑起来，哎，并不是这样，是谁撑的，是BOX3把BOX2给把BOX1给撑起来，但是为什么BOX3本身就这么点，然后能把BOX1撑这么高呢？为什么呢？因为我们BOX3清除了BOX2对它的一个影响，清除了影响以后呢，BOX3就会出现在BOX2的下边，换句话说，实上BOX3上边它还设置了一个外边距，所以实际上BOX3大小说啊，它的占地是这么大个，它的可见框只有这么大个，但是上边还会有一个外边距，所以完完全全我们是通过BOX3来把我们BOX1改撑起来的啊，这个东西你要稍微体会一下，它不难理解，你写一下，你感受一下就OK了啊，它并不难，那然后呢，我们要再看这个问题啊，还有什么问题，这里边呢，现在其实我们。

讲一下BOX3里面的内容有没有用，没有用，我们BOX3的作用就是想把BOX1给它撑起来，那BOX1多高的话，其实就是跟这个BOX2一边高就行了，所以BOX3里边写AA呢，没有任何意义，所以呢，没有意义，你就可以直接给它删除掉就完事，懂这意思吧，诶这样就可以把这个问题给它解决了，那这种解决方式就可以很完美的解决掉我们这个高度塌陷的问题，它就不会产生任何的副作用，但是说是不会产生任何的副作用，但是你会发现什么呢，其实。我们想一下，我这个div是不是我凭空加出来的，这个div在我网页里面作为结构来讲，它有没有用，没有用，它只是为了解决我们这个高度塌陷的问题，那这块就有问题，高度塌陷的问题，它是属于结构上的问题呢，还是属于表现上的问题，诶很明显它是属于表现上的问题，因为显示上高度差了，跟结构没有任何关系。

那这里边div它是不是属于一个HTML的一个结构，诶，那这个时候等于我们是在用这个结构在处理表现的问题，我们之前说了HTM2CSS是不是应该自己管自己的事儿，HTM2就负责结构，而我们的CSS就负责表现，那现在我们是不是等于在用这个HT去。修改我们这个样式，哎，去影响我们这个样式，虽然可以解决问题，但是实际上凭空在我们页面上加了一个标签，那这样的话有点不合适，我们希望什么呢？我们希望CSS的问题由CSS自己解决，不要假我们这个HTMR之手是吧，不要借mmr去解决问题，那这个时候我们把这多余的标签给它删了，删了以后，那这时候问题又来了，你是删了，删完了以后，那就高度就又塌了呗，又塌了，那现在我们想一下，我们解决这个问题的根本的关键点，其实就是要在我们元素的最后边，最最最最底边，我要加一个空的标签，然后让这个标签可粒boss让它清除浮动，然后它是不是就可以撑起我们这个副元素的高度了，哎，那这里边问题来了，我们要往元素的最后添加一个标签。

我们是只能通过HTML加吗？注意了，不是我们还可以这么加，哎，还记不记得我们之前讲过一个，这个尾元素叫做after啊，叫after after表示什么意思，After表示的是我们元素的最后啊，元素的最后，所以这个时候如果我直接来一个点BOXS1冒号冒号after，这选中的是谁？选中的是我BOX1的最后，也就是这个位置，那这个时候我们可以直接通过content来什么呢？诶来一个这个随便写一个啊，随便写一个，写一个hello，写一个hello，那这里边你来看在我这最后是不是就多出了一个hello啊哎，就多出了一个hello，那这个hello注意是不是H天猫添加了，不是跟H天猫就没有关系了，我们是通过CSS把它给加上去的啊哈，我给它加上去以后那。

注意了，它有没有撑起复元素的高度，哎，没有，因为我们还没有对它进行可粒boss，所以呢，我再给这阿尔我来一个这个可粒boss，说它清除浮动对它影响啊，但是你注意了，轻了，轻了有没有撑起高度，没有撑起高度为什么没用？哎，为什么没用，因为我们默认情况下，After这个伪元素，它是一个行内元素，行内元素的特点就是不独占一行，换句话说，你这有一块地儿，我就可以在这儿待着，我就不会独占一行了，所以其实对于他来说，你即使清除了浮动的影响，你看你这儿的话也看不出任何效果，所以我们还要做一件事，还要干嘛呢？我们还需要把它转换成一个块元素啊，转换成一个块元素，那这样它就可以撑起复元素的高度，那同理，这哈有没有用没用没用可以直接把哈给它去掉，那这样是不是就可以很完。

很美的去解决这问题了，原理上跟我刚才给下边添加一个BOX3，我把这box它写上吧，到时候你可以自己看一下，跟我添加一个BOX3原理是一模一样的，只不过区别就是这个时候我不再通过HDM2去加了，而是通过什么呢？通过一个after，一个伪元素加完了以后，我把它设置成块，然后用一个可粒的boss清除浮动元素对它一个影响，那这样其实的效果就是把我们这个伪元素这个阿放到什么呢？放到了这个位置，而由于它也没有浮动，也没有脱离文档流，所以它是可以撑起负元素的高度的，所以那这个时候你的负元素就可以被这个BOX2给撑开了啊，BOX2高度多高它就多高，BOX2300它就是300 box2100它就是100啊，就这么一个啊，所以我们通过阿维元素去解决这个高度塌陷的问题，是一个诶比较完美的方式，当然这个块的话会稍微的有点。

有点不是那么好理解啊，你自己写的时候再把它好好的去体会一下啊，体会一下好，我们这个呢，先说这么多，我们来听一下。