65.尚硅谷_HTML&CSS基础_高度塌陷问题总结.avi原创

咱们呢，上午是说了一下那个高度塌陷的那个问题，那我们再回顾一下这个高度塌陷的问题，那我们说所谓的高度塌陷就是什么呢？在我们这个文档流里，我们负元素的高度默认是被我们这个什么呀，诶子元素所冲开的啊，子元素冲开的，换句话说就是我们这个负元素多高子元素就多高，但是我们发现有一个问题，本来正常情况下呢，诶等会儿啊，我们来用我们这个火锅打开，本来呢，正常情况下。诶应该是这样的，对吧？哎，负元素被子元素撑开，但是当我们给一个元素干嘛呢？给我们这个BOXX2加上这个浮动以后，我们说BOXX21浮动，哎它干嘛了，脱离文档流，它一脱离文档流便不能去撑开什么呀，负元素啊，不能撑开负元素，所以干嘛呢，导致我们这个负元素的一个高度塌陷啊素高度塌陷，那我们说塌陷其实还可以，但是我们说了负元素高度一塌陷，那我们下边这些其他元素自然而然就干嘛了，哎就往上挤了，就会导致我们整个页面的布局变成什么呀，变得诶非常非常的这个混乱啊，非常非常混乱，所以呢，这个高度塌陷问题是我们必须要去处理的啊，必须要去处理的，那这里边我们说我们要怎么处理啊，哎，我们说开始说一个叫做开启我们这个叫做一个，诶BFC，或者是我们这个has layout啊，我们这两种方式都可以开启BFC，我们直接来一个overflow hidden开启我们那个Hass layout直接用我们那个叫做一个。

哎，ZOO1对吧，哎ZOO1，这是我们说这两这种方式，这种方式怎么说用起来是最简单的啊，最简单的但家注意这种方式用的时候，它会有一些什么呀，有一些局限，什么局限呢？怎么说欧尔腐文黑的什么意思呀，溢出的内容是被截取啊，哎，被截取，但是实际上我们复元素高度已经什么了，没有设置高度，说白了就是子元素多高，我是不是负元素多高啊，所以一般情况下它不会出问题啊，不会出问题，什么时候会出问题，当我们现在还还遇不到啊，那么说什么时候会出问题，如果说在我们这个负元素里边干嘛呢？有相对定位的元素啊，有相对定位元素，而你这里边又设置了一个over flow是黑，那么说相对定位干嘛呀，你如果这个元素移动到负元素以外，将会出现一什么情况呀，这个元素你就看不着了啊，你就看不着了，但是注意这个前提是什么呀，你开的是相对定位啊，开有相对定位，除了这个其他情况都没问题啊，除了这种情况，其他元素其他情况都没有。

问题啊，那然后呢，我还有一种什么呀？呃，还有一种我们说这种方式呢，会有一些小副作用，然后我们就采用了另一种，另一种我们说了一个属性叫什么呀，叫清除浮动，我们说叫什么呀，叫clear粒，诶可粒我们说干嘛呀，它不是让元素不浮动，它是干嘛呀，它是清除我们这个浮动元素对我们当前元素的一个什么呀影响啊，清除浮动元素对我们当前元素的一个影响，那我们这块举了一个例子，比如说现在来看，诶，我们说先一个一个看，我们这有一个BOX2，这有一个BOX1，这还有一个BOX3，那么说BOX2对我们BOX3产生的影响是什么呀？诶也就是说如果BOX2不浮动啊，现在我们这已经给它清除浮动了啊，把它给它住了，住了以后我们来干嘛呢？诶，如果box几呀，这是二，如果BOX2不浮动，那我要问你，我这BOX3应该跟哪。

哎，是不是应该这有一个元素，然后应该应该在这儿啊，哎，所以们看看啊，来一个BOXS2不浮动，我把BOXS2浮动给它去了，我就保存走你BOX3是不是应该跟这儿啊，哎，应该跟这儿，那所以我们说如果BOX3不受BOX2浮动的影响，那BOX3干嘛呀，是不是应该还是保持在这个位置，哎，保持在这个位置，所以干嘛呢？所以当B3浮动以后，但是现在我们来看受没受影响，受了，那我们如果不希望它受影响怎么办？哎，Clear一个这是right left还是right，哎，Right，因为这是我们这个右侧元素，然后一刷新走你，诶这时候下来了，你会发现当我们B3不浮动的时候，B3是不是也跟这啊，哎，也跟这儿啊，所以注意清除浮动元素对我们当前元素的一个影响啊，影响那同理，我要是一个live是什么呀，是不是清除左侧元素啊，诶，那我们清除完了该跟哪是应该提到BOX1啊，为什么呀，因为如果BOX1不浮动。

是不是它就跟这儿啊，诶，所以我清除它的影响以后，它是不应该还跟这儿啊，所以注意啊，清除浮动表示的是清除浮动对我们当前元素产生的一个影响，所以我clear left1刷新，诶它还在这个位置不变啊，还在位置不变，然后我们还有一个clear，一个boss，诶boss注意它不是说清除两侧的影响，他清除的是什么呀？诶清除的对他影响最大的那一侧啊，谁对他影响大就清除谁，比如说现在谁的影响大呀，明显是，诶明显是右侧，所以我一清除它，我一刷新是不是跑这来来诶跑这来啊boss谁影响大就清谁，如果一影响大就清除一，如果二影响大就清浊二，哪侧影响大就清浊哪侧，那我们说了这个玩意儿以后呢，我们说它有啥用啊，其实我们主要用的是什么呀？诶我们在做这个高度塌陷问题的时候，我们想了另一种思路，怎么思路啊，哎，我们说了我们这个高度塌陷问题的一个方式二，那这块我们是怎么解决的呀？诶我们说了。

BOX2浮动以后，BOX1的高度塌降了吧，诶，于是我干嘛呢？我在我们这个BOX1最后添加了一个div啊，BOX1的最后添加了一个div，但是一个div那干嘛呢？我什么也不写，是一个空的div，而这个空的div呢，它是没有什么呀，没有浮动的，也就是说意味着这个div可以干嘛呀，可以撑开我们这个box啊一啊，可以撑开BOX1，然后干嘛呢？我对这个div进行什么呀，进行清除浮动，也就是说我这个clear这个div会不会受到BOX2的影响，不会，也就是说白了，BOX2不浮动可在哪，是不是它浮动以后它还在哪啊？哎，因为它不受它的影响，所以干嘛呢？所以我们就借着这个div来间接的是不是解决了我们这个高度塌陷问题啊，说白了我用什么呀，我用它去将我们这个div给它撑起来了啊，将用这个玩意儿将我们这个div给它整个撑起来了啊，这也是我们说的这个div啊，这是我们说这。

啊，第二种方案，但是我们说了这种方案是我们的W3C推荐的一个方案，包括如果你看我们这个W3SCHOOL离线手册，它都会有对这个方案的一个详细的描述，比如说我们来看看HTMLCSS往下找，我们用个CSS浮动，诶我们来看它这问题的这个描述，看跟哪了，诶在这呢，它这给你演示了一个什么呀，是不是高度塌陷的一个问题呀，哎，高度塌陷问题我们来看它怎么解决的，你看。他是不是在我们这个什么呀，他这个塌陷应该是谁呀？应该是class为news，这个div是不是塌陷了呀，在这个div最后加了一个div可是什么呀？诶这class是clear，然后在这儿对这个class进行什么呀，清除浮动，诶他是不是通过这种方式去解决的呀？诶那这是它的一个推荐方式，这种方式也比较简单，也比较好理解，但是这种方式的缺点就是它给我们页面增加了什么呀，不必要的什么呀，结构这一部分在我们结构里是完全没有什么呀，没有意义的啊，没有意义的，没有意义的代码，所以我们希望什么呢？我们希望既不增加多余的结构，还可以解决我们这个高度塌陷的一个问题，于是我们采用了第三种方案，第三种方案我是怎么解决的，我们通过什么呀？我们通过after v类选中我们元素的最后边吧，哎，元素的最后边，然后干嘛呢？通过count给这个最后边添加一个什么呀，空的内容啊，什么也没有最后呢，诶不是最后我们通过什么呀，我们通过display将这个位置设置什么呀，块元素再对它进行什么呀，清浊辅。

实际上整个原理跟我们什么呀，跟我们第二种情况是什么呀，原理是一样的，只不过我们不再去通过HTML去添加结构而什么呀，而是通过CSS操作的了，这样我就是一个纯csi代码，不会对我页面添加一个什么呀，添加一个多余的一个结构，那这种方式呢，是我们什么呀，最推荐的一个方式，不会产生副作用啊，不会产生副作用啊，这个给它记住了啊，给它记住了下去以后再去好好的写一下啊，自己呢，可以把这个过程再去推导一下啊，这个东西它是怎么怎么一步一步的出来了啊，怎么一步出来。

好，那这个是我们说的这么一个问题啊，咱们把上上午那个简单又总结了一下，你停一下。