64.尚硅谷_HTML&CSS基础_解决高度塌陷的最终方案.avi原创

来呢，我们来再说一个这个属性，呃，说一个我们这个CS里边有一个样式，我们叫一个什么呢？叫做一个这个清除我们这个浮动啊，清除我们这个浮动，那什么叫清除浮动呢？我们先来看这么一个东西啊，那现在我们这来创建一个什么呢？创建一个这个div，来一个class，来一个这个box box1，然后呢，我这来一个div，再来点一个这个BOX2，然后呢，这再来一个div，点一个BOX3，一共是这么三个盒子啊，三个盒子，那接下来我们来看什么呢？我来给他写一个样式啊style，点一个BOXS1，给他来一个这个Y。Wise来一什么呢？来一个这个100个像素，然后hat呢，来一个100个像素颜色，Background color background color来一个这个，呃，不用红色了，用一个这个yellow吧，然后我这复制一下，走走，这是BOX2，这是BOX3 box2呢它它大一点，200200BOX3让它更大，三百三百颜色呢，我们换一个yellow green，然后这个呢，换一个这个blue啊sky blue保存现在我们什么效果呀，页面里是不是三个盒子呀，最上面BOX1最大，然后BOX32，然后BOX3是不是大盒子，就是小盒子，大盒子更大的盒子呀，诶来保存，咱们来看我们这个括弧，诶三个盒子，这是一，这是二，这是我们这个三啊1233个盒子，那现在我们要说一个什么问题呢？来接下来我要干一件事，我来给BOX1设置一个什么呢？设置我们这个BOX1向左。

好浮动设置棒击向左浮动，直接来一个float来一个什么呀，Left保存，诶那我们说了，那这块我一刷新应该什么效果，诶我一刷新是不是整个都拱上去了呀，哎，拱上去了，所以这边我们发现一个事什么呢？诶在这来写，由于什么呢？由于我们这个诶BOX1，由于这样写吧，由于受到我们这个BOX1。

浮动的什么呀，影响啊，由于受到我们box机浮动影响，我们说BOX2干嘛呀，诶整体什么呀，向上移动吧，整体向上，诶移动了多少呢？移动了100个像素，为说移动100个像素，因为BOXS1是不是100个像素啊，诶BOXS1的浮动上面有了100个像素空间，所以box括三二干嘛了，就往上移动了一个100个像素，包括不仅仅是BOX2 box3是不是也向移动了呀，也就是说BOX1后边的所有元素是不是都受到它的什么呀影响啊影响了，那现在有的时候干嘛呀，有的时候我我不希望干嘛呢。我不希望我这个BOX2受到BOX1浮动的影响，对吧，也就说白了干嘛呀，我希望你这个BOX2干嘛呢，你还跟这别动了，哎，他浮动他浮他的你干嘛呀，你就自当没看见是吧？诶自当没看见，那这玩意儿行不行呢？有没有这么一个方式可以干嘛呢，让我们这个BOX2不受浮动影响呢？那这里边我们说什么呢？诶我们有时希望什么呢？希望诶清除掉什么呀，诶清除掉我们这个BOX1，诶叫什么呀，其他元素浮动对我们什么呀，对当前元素产生的什么呀，产生的这个影响。

吃吃俺产湿生，诶产生一个影响，那这时候可以什么呢？诶这时可以什么呢？可以使用我们这个可粒诶来完成诶功能啊来完成功能，那clear是干嘛的呢？可直接来说是我们CSS里边的一个什么呀，样式我们来看一下，直接HLCSSCSS往下找CS参考手册，直接CTRLF搜一下c clear在这儿呢？诶clear叫什么呀？规定元素哪一侧不允许其他什么呀，浮动元素我们来直接看它这个描述，其实有时候呢，不太准确，其实可粒说白了就是什么呀，清除浮动啊清除浮动老贝简单来说一下啊，Clear用来干嘛呢？Clear clear可以用来清除其他元素，哎，其他元素，其他浮动元素对我们什么呢？对我们当前元素什么呀，影响，一定要注意它的作用，是不是不让元素浮动了，不是。

它是干嘛呀？呃，不让这个浮动元素对我产生影响啊，但是那个浮动元素它该浮动还是干嘛呀，还是浮动的，只不过是我这块不受它的什么呀影响了啊，不是它的影响，这里边我们直接来说它的可选值，可选值我们来看有这么几个，其实跟我们什么呀，你会发现它的值跟我们这个，跟我们这浮动是不是差不多呀？哎，什么left boths，还有一个什么呀，那啊那来我们来说一下这几个值，我们先说第一个值叫做一个，那那叫什么呀？诶默认值不什么呀，不清除浮动啊，不清除浮动，然后还有什么呢？还有一个值叫什么呀，叫做left left叫什么呀，叫做清除左侧浮动元素对我们这个当前元素的什么呀影响啊，清除左侧浮动元素对当前元素一个影响，然后还有一只叫什么呢？叫做一个red叫什么呀，清除右侧浮动元素对。

什么呀？诶当前元素的什么呀影响，还有一个最后一个叫什么呢？叫做boss叫什么呢？诶清除两侧浮动元素对我们这个当前元素什么呀影响，那我们现在来看这里边，我们来看现在这是BOX1，这是我们这个BOX2BOX1浮动导致我们这个BOX2是不是上来了呀？那现在我希望什么呢？我希望BOX2可以不受BOX1浮动的影响，那我就要干嘛呀，我是不是要对我们这个BOX2去清除浮动啊？诶那问题来了，我这个可粒日值我怎么设置，我是不是想清除我们这个BOX1浮动对我们这个BOX2生了什么呀？哎，产生了什么呀影响，那我要怎么写可粒我是life的还是right，哎，那我们是不是要看我bos跟哪啊，BO1跟哪？

啊，是向左浮动的呀，哎，所以我们这块可粒应该可粒什么呀？可粒诶left啊可粒left我这一保存咱们来看一刷新走你跑哪去了？哎，那我这个位置一调整完了，是不是看起来就好像我那个BOXS1他没浮动一样啊，但是实际浮没浮啊，哎，实际上是浮动了，但是我们说了干嘛呀，我爆个四二给它设置一个清除浮动，说白了我爆个三就当它干嘛呀，没浮动还是不是还在那个位置啊，所以注意我们清除浮动以后，清除浮动以后我们元素会回到什么呢？诶会诶回到我们这个。

是不是浮动之前的这个位置啊，或者严格来讲是回到什么呀，回到其他元素浮动之前的位置，所以什么什么效果呀，当然我给它一清除左侧浮动以后，它是不是还回到它原本的位置，哎，没有受我们什么呀，BOXX1元素的一个浮动影响，所以什么叫清除浮动，清除浮动不是让其他元素不浮动了，而是干嘛呀，让其他元素的浮动不会影响到我这个当前的什么呀，当前的元素啊，灯空元素好这块看明白了吗？哎，然后干嘛呢？我可粒life去了，去了以后干嘛了，是不是又受影响了呀？哎，受影响了，然后咱们再看我来什么呢？我让他也来一个float rap，诶，我让Bob干嘛了，是不是向右浮动啊？哎，来，我们来看这效果一刷新走，你Bob跑哪去了，是不是这呢呀，哎，BOS1是不是跑这了呀？哎，那这是谁呀？Bo复三，那我这个B复三实际上现在受到什么，是不是受到了两个元素一。

一个影响啊，一个是我们这个BOX1，还有一个是什么呀，我这个BOX2，那现在假设我想干嘛呢？我想让BOX3不受BOX1的影响。那要怎么办？诶，我是不是对报告三来一个clear什么，是不是left呀？哎，Left来后咱们再看报括三，我来一个clear，一个什么life保存，那也就是说我对BOX3CLEAR left是不是清除左侧浮动元素对它影响啊，那我们来说，假如说BOX1不浮动，我这个BOX2应该跟哪。报BO3应该跟哪，BOS1不浮动，报三应该跟哪一，三三应该跟哪三是不是应该跟这儿啊，哎，三就跟这啊，我这一刷新走你是不是，所以还回到这来啊，诶所以什么呀，诶说白了就是回到什么呀，BOXS1如果不浮动，我BOX3在哪是不是在哪啊，所以注意，如果BOX1不浮动，我BOX3是不是应该跟这啊，是不是该跟这啊，对不对啊，搞不明白是吧？来不让他浮动，然后让BOS1也干嘛呀，也不浮动保存，我就刷新走你它是不是就应该跟这儿啊，你不用看它啊，因为是BOX1对它产生影响了，能理解吧？诶所以咱么叫清除浮动呀，就是我那个元素不浮动的时候，我这个元素在哪是不是在哪啊，哎，所以这边叫一个清除浮动，一个影响，那现在我可粒left是清除什么呀，左侧的，那我来什么呢可粒。

Right呢，是不是右侧的呀，那右侧应该是谁呀？应该二啊，那么说了，BOX2如果不浮动，我BOX3应该跟哪，是不是应该跟这个位置啊，哎，这个位置，所以我一刷新走，你是不是又往下挪了呀，又往下挪了，因为BO2如果不浮动的话，BO3就是在这个位置，所以注意就是什么呀，回到我们说这个元素不浮动，我们这个位置在哪，它还要干嘛呀，还回哪啊做一个清除浮动，诶那还有一个，还有一个叫什么呢？叫做一个boss boss就有点难度，叫什么叫清除两侧，那我们说了说是清除两侧，实际上什么呢？清除诶对它。

诶影响，诶最大的那个元素的什么呀，浮动啊，清除对它影响最大的那个元素的浮动，那我们来说这两个元素谁对它影响大呀，是不是二啊，诶所以你这刷新你设置boss跟你设置right什么呀是一样的啊，是一样的，所以注意啊，Boss不是说白了两侧都清除了，而什么呀，清除对它影响最大的那个，最大那个是谁呀，BOS2，所以就相当于什么呀，可粒是boss跟可粒是什么呀？可粒right是一样的，但是前提是什么呀，前提是因为我右边的影响大吧，那我们来看，如果我把什么呀，把BOX1变高一点，变成什么呢？变成一个500，那我问你现在谁的影响大了，是报影响大呀，诶所以这回就相当于什么呀，清除我们这个左侧的了，所以boss表示什么呀，清除那个影响最大的啊，最大的好，那这个是我们这可两个属性，三个属性啊，叫做那74个，那默认值不清楚，Live表示要清除左侧浮动元素对当前元素的一个什么呀影响。

Right表示清除右侧浮动元素对当前元素的一个影响，Bos表示什么呀？清两侧对它影响啊，最大的那个元素啊，清除最大的那个啊，好，这也是我们说的一个清除浮动，哎，那说完这玩意儿它有啥用呢？这有啥用啊来，那接着来说一个问题，来我们来一个零五还是我们这个高度，诶解决我们这个高度塌陷，诶二这是我们说的第二种方式，那怎么解决高度塌陷问题，我们先给它干嘛呀？重现一下div点一个BOX1，然后这一个div点一个BOX2，这来设置一下样式，Style来什么呢？来一个点一个BOX1 box1还是我不设置宽度，不设置高度，只设置一什么呢？Borderer来一什么呢？诶一个像素，然后solid，然后来一个这个red，然后呢，我们这来一个点一个BOX2，然后呢，我给它来一个Y，来一个100个像素，Hi呢，也来一个100个像素background color来一个这个blue保存，现在我们说BOX1的高度是不是被box撑开的呀？CTRL运行是这个效果吧，诶，当我给boxll设置一个浮动以后，Float来一个什么呢？Left会导致什么现象，诶，Box一个高。

高度塌陷这两个边框是不是合到一起了呀？诶因为Bo机的边这个高度塌陷了，那响了，那现在我们有了这么一个可粒，我能不能通过可来解决高度塌陷的问题，诶那我们先想想啊，我们先想想注意啊，这清除只能是清除什么呀。

兄弟元素是吧？哎，你得是一块的，也就是说我现在这什么呀，这是父子啊，你对他清除没用啊，大家清除没用，那我们现在想想怎么办？诶我一想这样现在谁浮动了呀？BOX2浮动了吧？哎，来，那我在这加一个，加一个div，在BOXS2下边我是不是又加了一个div啊，这div我们随便起个名class来什么呢？BOX3，然后在这儿我来设置一下样式，来一个BOX3，我先不写样式啊，那好，我现在问你BOX2浮动了，BOX3有没有浮动没有，那也就意味着BOX2它不能撑开负元素，但是BOX3行不行？行，我这个保存咱们来看一刷新塌没塌，还塌了，为什么呀？报三是没高度啊来，我随便写一个，我给保三写一个，诶我这一保存一刷新走你。是不是有高度了呀？诶，也就是说BOX3现在可不可以撑开负元素，可以撑开负元素，诶那好了，那既然BOXX3可以撑开负元素，但是我们会发现什么呢？BOX3由于受到了我们这个BOX2的一个什么呀影响，它跑哪去了？是不是跑上面去了？那么想想，如果BOX3没有受我们这个BOX2的影响，他应该跟哪是不是应该在这个位置啊？诶，那我们想想，假设BOXX3还在这个位置，那它是不是应该把我们这个负元素的高度是不是也撑到这个位置啊？诶，那我们想想我能不能让BOX3。

回到这个位置，诶，那我们想想，如果我对BOX3来一个clear left的是不是就清除左侧浮动元素对它影响了，那清除这个影响他应该跑哪来了？应该跑下边来了，诶那我们想想他跑下边，那他能不能把这个负元素也撑到这啊，行不行啊？诶来，我们来试试直接对BO3，我来一个clear，来一个什么呀外的或者最干脆的方式来什么呀，Boss，诶，我来直接写boss清浊两侧我们来看效果，这一刷新走你。

发现什么了，BO3是不是跑下边来了，同时BO3跑下边他是不是把我们这个负元素的高度也给它撑开了呀，但是发现有个问题，这A跟这是不是挺碍眼的呀，这跟这把我整个高度是不是都给变了呀？诶来我们再看我把A给它干嘛呢？去掉，你说行不行呢？保存我这一刷新走你。是不是也行啊，哎，你会发现我通过这种方式是不是也可以去解决我们这个高度塌陷问题啊，哎，那怎么解决的，那这块我改一个名啊，不叫报告仓了，咱们就叫一什么呀，可粒，哎，这叫一个可粒，那怎么解决的？诶我们还是再来说一遍。解决我们这个高度塌陷的一个方案二，那什么方案呢？我们可以直接在什么呢？在我们这个高度塌陷的什么呀，副元素的这个最后添加一什么呢？添加一个空白的div啊，或者不一定是div，只要是个紫元素就行啊，只要是个矿元素就行啊，在我们这个后边加一个空白的div，那注意了，这个div有没有浮动，哎，没有，由于这个div并没有浮动，所以它是什么呀，它是可以撑开我们这个什么呀，负元素的一个什么呀，高度的，但是这就带来一个问题，它虽然可以撑开，但是由于它受到了我们这个浮动元素的影响，它是不跑到我们这负元素的最上面去了，哎，所以实际上也撑不开，那于是干嘛呢？哎，然后干嘛呢？哎，再对其进行什么呀？哎，进行一个。

清除浮动这样什么呢？这样哎可以通过这个什么呀，这个哎空白的什么呀，Div来干嘛呢？来撑开我们这个副元素的一个高度，那基本什么呢？诶基本没有什么呀，没有副作用啊，基本没有副作用，或者说它的副作用比我们那个什么呀，比我们那个overflow hidden稍微的还小一点啊，稍微还小一点，而且干嘛呀，它会兼容什么呀，各种浏览器啊，这种方式，各种浏览器都都兼容啊，都兼容这种方式能看懂吗？哎，说白了，我们是通过什么呀，通过这个空白的div来干嘛呀，来撑开我们这个负元素的啊，来撑开我们负元素的，但是我们想想它有没有什么问题。

有没有什么问题，那注意了，我这div叫什么呀，是H代码啊，天猫属于结构表现行为里边么呀，结构吧，那现在等于我们在页面里多加了一个结构，是不是专门要处理我们这个表现的问题啊，哎，表现的问题，而且这个结构在我们页面里有没有意义啊，没有意义啊，没有意义，我们说使用这种方式虽然可以解决问题。

但是什么呢？但是会在我们这个页面中干嘛呀，添加多余的什么呀？诶多余的结构，所以什么呀？诶所以这个呢，诶会添加多余的结构，所以这种方式干嘛呀，它并不完美啊，它会以小附子添加一个多余的结构，但是这个其实呢，问题不是特别大，即使多了呢，问题也不是特别呀，那你注意这是不是，这也是一种什么呀解决方式，而且这种方式还是什么呀，还是我们W3C它推荐的方式啊，W3C它推荐我们使用这种方式，但是我们说了这种方式有一个小问题，会在我们页面里添加什么呀，添加多余的结构，诶那我们就想。那我能不能不添加多余的结构。同时。又把这个塌陷的问题给他解决了呢。能不能呢，来CTRLCCTRLV，我再复制一个来什么呢？零六，这是我们高度塌陷的一个问题的一个第三个，诶我们来说说，那这个我们要怎么去处理，我不想添加这个div，同时呢，我还想解决这个塌陷问题，行不行，CTRL运行现在是不是又塌了，诶那怎么办？

那怎么办？诶，那我们想我们刚才那种方式，是不是像我这个负元素，也就是BOX1的后边添加了一个空白的一个div吧，那这一块添加我是通过什么呀？我是通过这个HTML添加的吧，那我一想啊，我能不能通过CSS来向BOC的后边添加一个元素，能不能呢？诶我们有没有一个选择器可以选中我们这盒子的最后边这块有一个什么呀，是不是有一个after尾类啊，诶来我们这来写这么一个通过我们这个after尔的尾类来干嘛呢？来选中我们BOX1的什么呀，后边怎么写，直接来一个点一个BOX1，然后冒号一个after，这个是不是就是我们BOX1的最后边啊，哪块是不是就这说白了，哎这儿，那我这来什么呢？来一个这个content的来什么呢？来一个点，我随便写一个，我就写点。

或者直接写一个什么呀，写1HELLO，那这什么效果，我是不是在box机的最后边添加了一个hello啊，诶我这一刷新来走你，诶你发现什么了，是不是多了一个hello啊，而这个hello我是通过什么加进来的CSS吧，你看能选吗？选不了诶选不了hello我添加进来了，但是我们说这个是个什么元素。内联元素吧，诶内联元素，那我能不能把它转化成一个块元素行不行？诶我们来这里边我们就添加一个内容，然后干嘛呢？诶我要将它转换成一个块元素，怎么转换？诶我们用第play来什么呀？Block它是不是变成块元素了，这回一保存再来看，一刷新走你诶虽然没有变化，但是这已经变成什么了，变成了一个块了，好，那变成块了，我们就说了，现在我这个after是不是就跟我们刚才那个div是一样的呀，那我如果对这个阿进行清除浮动，是不是对我们那个div清除浮动是一样的呀？诶那我们说它能不能把我们这个复元素高度冲开呢？来，我们来试试清除我们这个两侧的什么呀，不用直接来一个可来什么？

啊boss来我这一保存，那如果行是不是就就下去了，哎就下去了，我这一保存，咱们来一刷新走，你发现什么了，是不是下去了，哎也撑开了，但是还是这个问题，这hello是不是要碍眼呀，碍眼怎么办呀？哎，Hello我不写了，我直接还有空的行不行啊，诶来这再一刷新走你。

是不是就行了呀，哎就行了，而且我们来说这个效果是不是跟我们刚才那个效果是一样的呀，哎原理原理呢，原理是不是也一样啊，哎原理是也一样的，所以这里边干嘛呢？哎，我们可以哎通过在我们诶通过什么呀，通过我们这个阿诶尾类干嘛呢？诶向我们这个元素的这个最后添加一个空白的什么呀块元素，然后对齐干嘛呀，哎对齐清除浮动，那我们说这样做和什么呀，哎和我们添加一个div叫什么呀的原理一样啊，可以什么呢？可以达到一个什么呀，相同的效果，而且还有什么好处。

我有没有在结构里添加多余的div，诶没有，而且呢，不会在我们这个页面中干嘛呢？添加多余的什么呀？Div啊div这是我们最推荐使用的方式，诶几乎就什么呀，没有副作用啊，几乎没有副作用，那可能还有一些，可能暂时没有发现是吧？诶几乎没有副作用，但是还有一个小的副作用，待会咱们再说啊几乎没有副作用，这是一什么呀？最完美的一个一种什么了，一种方式，但是有个问题，那我这么写它是不是只对BOS1起作用呀，它通不通用啊，不通用那我就不写BOS1换一个名叫什么呢？叫做clear fix，诶clear fix是不是清除我们这个修复啊，诶清除修复然后干嘛呢？我给box再添加一个这个class clear fix，然后你刷新是不是效果一样啊，以后谁高度在塌陷我干嘛，我是不是给它加一个clear fix就行了呀，哎，Clear fix啊一要。

B，它这里边三个属性缺一不可，Contain添加一个控制内容，Display转换成一个块，可boss清除两侧的一个什么呀，浮动啊，清除两次浮动，这个是我们最推荐使用的一个方式，也是我们用的最多的一种方式啊，那好了，那这种方式写完了，但是它有没有问题啊，刚才说了它其实并不完美。哪不完美呢，来一溜打开什么效果呀？诶IE6它不支持，为什么呢？哎，在我们这个IE6中干嘛呢？他不支持我们这个after特鬼类，所以你这哥们写完了IE6干嘛呀，压根他就不认识啊，压根就不认识，那你要想兼容I16怎么办？哎，我是不是再写一个呀，来一个clear fix写个什么呀？诶zoo母来个一啊zoo母来一个一，所以所以什么呢？所以在我们这个IE6中还需要使用我们这个has layout来干嘛呀来处理，所以如果你不兼容A6，你就写一个它就行了，如果兼容A6，你再写一个可粒fix里边来一个什么呀。

父母一这个东西就是为了兼容I6的保存，我们来看效果这一块一刷新走，你是不是就行了呀，诶现在这样你干嘛了呢？所有浏览器都兼容了啊，所有浏器都兼容了，好，那这个呢，就是我们说的一个高度塌陷的一个最终的一个解决方案方案，诶第二个还有第三个用哪个呢都行，但是推荐使用什么呀，使用这个，把这个代码尽量给它干嘛呀，记住了，但是他也不难，你只要理解了这代码，其实一点也不难啊，理解一下，包括我们那个可粒那个属性，你也要去看一下啊，你要看一下来，我们这来停一下。