62.尚硅谷_HTML&CSS基础_解决高度塌陷问题一.avi原创

那刚才呢，我们这块说的是这个，诶高度塌陷这个问题，那接下来呢，我们来干嘛呢？诶解决这个问题啊，我这复制一个来一个零二解决我们这个高度塌陷，诶那这个是我们什么呢？诶这是我们这个一，哎或者要就直接写个一吧，这是我们这个第一季是吧？诶第一种方案我们来看怎么去解决这问题啊，我先把这些东西都给它注掉，注掉以后呢，把这个结构都给它留下来，然后呢，我把这个float我先给它删掉，现在我一运行它塌不塌，哎没有它正常显示，包括下边这黄的也没有上来，那接下来呢，我来把这个float给它加回去，这回再保存一刷新，总你是是它来，诶好，那现在我们来解决问题怎么解决呢？那解决这问题呢，非常简单，但是呢，我们要先说一下什么呀，我们先要说一下它的一个原理，我们再说哎怎么解决啊，先说一下原理，我们在这儿来说这个原理来来说啊。

根据什么呢？根据我们这个W3C的一个标准啊，在我们这个页面中，哎元素哎都有一个叫什么呢？叫做隐含的属性啊，隐含的属性叫做什么呢？叫做一个has，诶，叫做一个什么呀？叫做一个呃，Block，诶，Block。Form还有什么呀？叫做一个context啊，Block，哎，Form contact block，哎，Block叫什么呀？块哎，Forming叫什么呀？格式化哎，Content的上下文或者说叫什么呀？环境连一块叫什么呀？叫块及格式化环境简称什么呢？简称叫做一个BFC啊，简称BFC啊，Block for marting contact啊，简称BFC，记住了啊，是BFC啊，是B，不是那个K啊，不是K是BFC啊当然我不说你们可能还不至于混是吧，说完了就记串了啊一定注意是BFC，那这叫什么呀？叫隐含的属性，什么叫隐含的属性啊，就是说这东西我们看见看不见啊，哎，我们是看不见的啊，我们看不见的简称BFC，我们来说诶叫什么呀？块及格式化环境该属性诶默认诶该属性可以什么呢？可以设置打开或者什么呢？或者关闭，哎，或者关闭，打开或者关闭，那我们说默认什么呀？默认是关闭的啊，默认是关闭的。

那我们主要关心的是什么呀？当开启我们这个元素的BFC以后，那我们说我给它开启了以后，它会有什么新鲜东西呢？哎，当开启了元素和BFC以后，我们元素将会具有什么呢？如下特性啊，元素将会具有如下特性，我们来一个个说第一个，诶开启元素的FC以后，第一个特点叫什么呢？叫做开启BFC的这个负元素叫什么呀？负元素的这个外边距。

不会和什么呀，子元素重叠啊，负元素的这个垂直外边距不会和子元素什么呀，重叠什么意思？举个例子，这一个负元素，负元素这一个什么呀，子元素我负元素没有设置边框，也没有设置什么呀，拍定它俩外边距是是相邻的呀，好，现在我给子元素设置一个外边距什么情况，是不是负子一块往下走啊，哎，一个往下走，好现在我说我给我们的这个负元素开启了BFC，那这时候子元素为外边距干嘛呀，将不会传递给什么呀负元素啊这是第一个特点，然后再来说第二个特点叫什么呢？叫做我们的这个什么呀？哎，开启BFC的元素不会被我们这个浮动元素所覆盖，不会被我们这个浮动元素所覆盖，什么意思？来这一个BOX1，我下边一个什么呀？BOX2，我让box。

Z向左浮动BOX2什么效果，是不是上去了，上去了它是不是被BOXS1给它盖住了呀？好，如果我给BOXS2开启了BFC，那注意BOX1它盖不住BOX2，那BOX2跑哪去呢？它会跑到BOX1的这个边上，即使没给BOX2开浮动，它也干嘛呀跑到我们这个的，所以注意开启的B元素不会被浮动元素所覆盖啊，不会被浮动元所覆盖，但是这两点呢，其实咱们现在不是特别的关心是吧，跟咱们说那好像没什么太大关系是吧？诶那我们来说第三一个，第三一个叫什么呀？诶第三一个叫做。负元素开启BFC的这个负元素，诶那元素吧，诶可以包含什么呢？浮动的什么呀？子元素啊，可以包含浮动子元素，那我么想想我们出现这个问题的原因是不是就是我们这个BOX1，它不能包含我们这个浮动的这个BOX2啊，诶那我们想想，如果我给BOX1开启了BFC，那什么效果，它是不是就可以包含了呀？可以包含也就是意味着我们这个BOX2是不是可以撑开我们这个bos机了呀？诶可以撑开我们这个bos机了，所以这个BFC是什么其实都不重要，重要的是什么呀，我给它开开以后它会什么呀？它会有哪些功能啊，有哪些功能？哎，那这个能理解吗？哎，那我们已经知道开机以后它会有这些功能，那接下来我们的问题就是什么呀，是不是怎么开呀，哎，我这来一个什么呀，BFC冒号来一个什么呀，开启行不行啊，这这做梦一样是吧？哎，这肯定是不行的。

既然叫什么呀，既然叫隐藏属性，它肯定不是这么写的，对吧？哎，就像你这个玩游戏里边要输什么呀，输秘籍一样，诶你输一个秘籍，他这可能干嘛呀，金钱什么东西开无限是吧？诶但是现在我们来说，那这东西怎么开启啊，诶注意没有一个什么呀，没有一个属性说可以直接干嘛呀，就专门的开启BFC的，所以这里边什么呀，哎，我们都是通过一些属性去间接的开启BFC，那我们来说如何开启我们元素的什么呀？BFC啊，如何开呢？我们来说方式其实还挺多的，第一个叫什么呢？设置我们元素浮动啊，设置元素浮动那注意什么意思，也就是说我只要让元素浮动，那实际上就相当于什么呀，就相当于开启了我们这个元素的一个什么呀，BFC啊BFC，诶，然后再看啊们接着来说第二一个叫什么呢？设置我们元素叫什么呢，绝对定位啊也可以。

开启BFC，然后第三一个叫什么呢？设置我们元素的这个，诶，Display，诶设置元素为什么呢？为in line block啊，为in line block，那这三种方式我们来一块说一下啊，其实设置元素浮动跟设置元素绝定位呢是什么呀？效果其实是一样的，我们直接也是浮动了，因为绝对定位我还没有说啊，没有说，那也就是说我是不是只要给BOX1也设置浮动，那是不是就意味着我给BOX1开启了BFC啊，诶那我们想啊，我给BOX1开启了BFC，它是不是就有这三条特点了呀？诶那我们说了，如果它有第三个开启BFC元素可以包含浮动子元素，那是不是就意味着box c就可以包含BOX2了？诶那最简单方式我来什么呢？来一个float。

打一什么呀？Like，我是不是让BOSS1也浮动了，其实这你也好理解，为什么好理解呀？诶你BOS2子元素浮起来了，导致负元素包含不了了干嘛呀？我让复元素是不是也浮起来，是包住了呀？哎，也浮起来来，我这一保存是不是也浮起来了？哎，咱们先看能不能包住啊，我这一刷新走你诶首先高度他没塌没它边框是不是撑起来了？哎，撑起来了，但是这又带来问题了，宽是不是没了呀？宽度为什么没了？哎负元素浮动以后是不是脱离文档流啊，脱离文档流以后干嘛了？宽度是不是也是被子元素撑开了？哎，所以这里边注意，虽然高度没差，但是宽度是不是没了呀？哎，宽度没了，但是这都不重要，关键问题是什么呀？下边这是不是又上来了呀，而且上来比刚才还多了是吧，哎，比刚才多了，所以你会发现我让它让它浮动，我能不能解决问题啊，不能解决问题，其实也是让我们的问题其实更更复杂了是吧，宽度高度还好。

好了，但是宽度干嘛了呀，宽度没了啊，宽度没了，所以注意我们开启BFC这些样式，它都不是直接去开启BFC的，所以这些开启方式都会有一些什么呀，都会有一些副作用啊，或者说它会给我们带来一什么呀，不好的地方啊，不好的地方，所以你会发现当我一浮动以后干嘛了，高度虽然不塌了，但是什么呀，宽度也没了，而且什么呀，后边元素布局是不是还乱了呀，哎还是乱了，那所以这个flow呢不好啊罗的不好，诶那我们来说啊，使用这种方式开启会什么呢？会倒诶虽然可以什么呀，诶撑开负元素，但是什么呢？哎，但是会导致我们这个负元素是什么呀，宽度宽度丢失吧，哎宽度丢失，宽度就不是被我们这个负元素撑，哎，不是跟负元素100%了，而且也变成什么呀，被子元素撑开吧，哎，被子元素撑开，而且还有一个问题。

也同样，但是而且什么呢？而且使用这种方式也会什么呀，也会导致我们这个下边的这个元素干嘛呀，诶元素下边的这个元素干嘛呀，上移啊，也会导致我们下边的元素上移，是不是不能干嘛呀，不能解决问题啊，哎不能解决问题，所以注意这种方式副作用干嘛呀，它比较大，所以这种方式我们推不推荐啊不推荐，那我们再来说设置元素绝对定位这两呢，实际上效果是什么呀，一样的，所以一二这两种方式我们都干嘛呀，都不推荐啊，都不推荐，那我们再来看第三种叫什呀，设置为这个in linelo，直接写了怎么设置啊，第一次play来一个这个in linelo，诶我这别跟这设置，我得设置负元素吧，哎，我是给负元素开启BFC，所以来一个第display，来一个in line block，我这一保存，咱们来看效果，咱们先不。

写啊不写保存走，你踏着了吧，诶，然后给它写上来保存，这一刷新走你，诶不他了吧，而且布局是不是也好了呀，但是还是那个问题，宽度是不是又没了呀，哎，宽度又没了啊，宽度又没了，所以这里边注意设置元素为inline block可以什么呢？可以解决问题。

哎，但是什么呢？但是会也是会导致我们这个宽度干嘛呀，哎，宽度丢失也是副作用比较大，但是我们这块什么呀，也是不推荐使用这种方式啊，不定使用这种方式，所以你会发现我这三种方式开启BFC都会给我带来一些什么呀，副作用，哎都会带来一些副作用，那我们是不是想一个找一个副作用尽量小的一个呀，所以这里边我们经常用的什么呢？是我们这个第四种，第四种怎么设置呢？我们叫什么呢？将我们这个元素的overlow设置为一个什么呢？C vile的值，诶将这个over flow设置一个非VI的值，我们说VI是什么呀？是不是默认值啊，只要你的o floww不是visible就可以干嘛呀，就可以开启我们这个BFC，而且这种方式干嘛呀，它的副作用相对来说更小。

可一些啊，更小一些，直接来看啊，直接来看来一个overfflow，我来一什么呢？我先来一个visible这玩意儿，我们来看有没有用啊，我一刷新走，你说不行啊，哎不行，那接下来我们看其他值，其他值还有什么呀，什么黑的凹凸，还有一什么呀，是不是死块啊，诶我们来一个死块，让他滚一个，我这一保存咱们来看一刷新走你诶是不是很完美啊，哎，高度就撑杆了，但是你看现死扣有什么不好的地方，是不是出个滚动条了呀？哎，出滚动条了以死磕呢，你这出滚动条，有时候我我不想要你这滚动条吧，哎，很难看，所以死磕呢，也并不是一个推荐的方式，那还有什么呀？诶好土保存，我们来看效果，一刷新保你。诶高度塌没塌没塌，并且有没有滚动条，哎没有滚动条，所以凹凸呢是一个什么呀，是一个比较好的方式，或者还有谁呢？还有我们这个诶黑黑其实我们会用的更多一点，但是这两种方式呢，没什么差别啊，没什么差别，我一保存咱们来说一刷新走，你是不是效果是一样的呀，诶效果一样的，所以这里边我们推荐的方式是干嘛呢？诶推荐方式将我们这个哎overlow哎设置为什么呢？设置为低，哎是什么呀？是一种副作用最诶小的开启BFC的什么呀方式，但是是不是意味着它没有副作用也有，但是那个副作用我们遇到的情况比较比较几率比较低啊几率比较低等我们讲完定位，我们再说它的副作用到底是什么，但是现在你要知道，我给它设置完over。

Hidden可以干嘛呀？可以开启我们这个元素一个什么呀？BFC，开启BFC以后，我们这个负元素将可以干嘛呀，包含这个浮动子元素，所以解决高度塌陷最简单的一个方式就是干嘛给负元素添加一个overflow hidden啊，其实说了半天就是什么呀，就是这么一个属性啊，就是一个这么一个属性，但是前面一直在说什么呀，它的一些原理，这个原理能听懂吗？好，那我们再看效果啊，现在一刷新是不是不塌了呀？哎，整个布局也就好了啊，也就好了，所以以后高度再它就给副元素加上么一个什么呀？Overflow hidden啊overflow hidden，诶，那这好了，我们来看其他元素，看看其他网浏览器，看看什么呢？

他没他呀，没他，哎证明里边好用，来咱们看看我们这个IEIE先看IE11，诶稍微等一下，它比较比较慢，哎呀快嗯，IE11啊，是不是已经OK啊，诶来看看我们IEIE9 ie9是不是也OK啊，诶直接来看我们IEIE8，诶IE8。

也没问题是吧？哎也没问题，来再看IE7，诶I7都好使，是不是没啥大问题了呀？哎，但是关键一个还有谁呢？I，哎，我们那个I16，但是I16兼容情况也不多了啊，但是我们要说一下怎么去兼容它点开，哎呦，他的还是那么那么销魂是吧，而且这个这这哥们儿好像给他摆摆边上去了吧，哎，整的很奇怪，这么一个东西，反正说1000道1万塌了对吧？哎塌了那为什么呀，我不是已经给复元素开启了BFC了吗？诶所以这里边来说一个问题，诶IE6它不支持，但是在我们这个IE6及什么呢？及以下的这个浏览器中干嘛呢？诶并不支持我们什么呀，BFC，刚才我们看到了，实际上IE7是不是都管用啊，但是一到IE6就不管用。

了，在IE6及以下的浏览器中呢，并不支持BFC，诶那我们说了，这不是W3C的标准吗？为什么IE6它不它不支持，那注意IE6的时候，微软和W3C这俩人还还干嘛呀，还不对付呢，诶II微软想说什么呀，我说了算，W30想说什么呀，我说了算，所以他就干嘛呀，没有去完全遵守这个W34的一个标准啊，没有完全遵守W3的标准，但是现在这两个嘛呀，已经同流合污了是吧？诶同流合污了，甚至有一年这个什么呀，IE9还被W3C评选为了什么呀，最佳浏览器是吧？也不知道怎么想的啊啊好，但是注意啊，IE6以下的浏览器并不支持BFC，所以什么呢？所以使用诶这种方式哎不能兼容什么呀？哎，不能兼容I6那怎么办呀？哎，你就不用I6就完了是吧？哎，但是我们要说一下如何去兼容啊，如何兼容，真的想兼容怎么兼容。

我们来说一下，在我们这个IE6中，虽然什么呢？虽然没有什么呀，BFC，但是什么呢？但是具有，诶另一个什么呀，隐含的一个属性叫什么呢？叫做一个诶叫做一个has，诶lay out啊叫一个has layout，什么叫has layout呀，Has什么意思呀，有没有，或者你可能看到有这么写的，他可能连着写的叫一个什么呀，Has layout，什么叫has layout呀，Has叫什么呀，有没有啊，有没有料叫什么呀，布局啊has料有这么一个隐含属性，我们来说该属性的作用和什么呢？该属性的作用和什么呢？哎，和我们这什么呀，BFC类似啊，和我们这个BSC类似，所以什么呢？所以在我们这些什么呀，在IE6浏览器中干嘛呢？诶可以通过开启我们这个has layout来解决该问题。

啊来解决该问题，那还是，那就问题来了，我们怎么开启哈雷奥的呀？哎，那肯定有一点的是overflow黑肯定干嘛呀，开不开，因为我们这写上了显然是没用啊，哎写着没用，那怎么去开启has layout呢？那我们说了开启has layout的方式呢，也很多，开启方式很多，哎，我们我们不说那些了，我们说那些都没用了，说些什么呢？哎，我们。诶直接哎使用一种什么呢？哎，副作用最小的怎么开启呢？诶直接将我们这个元素的这什么呀，哎zoom嘛呢，设置为一即可啊直接将我们元素这个zoo设置为一即可，什么意思？那现在我先把这个住了啊over flow黑我这一保存，咱们现在一刷新走，你现在是不是还摊着呢，他着呢，我这给它加一个属性来什么呢？来一个zoo母冒号来什么呀一我是不是添加了这么一个样式啊保存我们来看效果，这回一刷新走，你还塌不塌了。

是不是就不擦了呀？哎，就不擦了，为什么不擦了，因为我使用这个ZOOM1开启了我们这个什么呀，负元素的has layout，哎，所以干嘛了，导致它可以包含它这什么呀子元素，所以干嘛了，所以就没有塌陷啊没有塌陷，那这里边我们简单说一下这个zoom什么意思，Zoom什么意思呀，是不是放大的意思呀，哎，Zoo表示放大的意思。哎，放大的意思，那后边什么呢？哎，后边跟着一个什么呀，跟着一个哎数值。哎斜几你斜几就干嘛呢？哎就将我们这个元素干嘛呀，放大几倍啊放大几倍，比如说是改一个改一什么呢？改一个二，我们来看一刷新走你完了这哦这是不是A对在ae里看啊我这一刷新说白了不就二倍了呀，哎我写什么呢？我写一个，我写一个三，我一保存一刷新是不是三倍呀？哎写几就放大几倍，所以我来一什么呢？来一个一叫什么呀，放大一倍，那放大一倍是不是跟没放大一样啊哎就一边大了，所以我一刷新干嘛呀，没有任何副作用在那干嘛呢？哎所以zoo目一表示什么呀？诶zoo目一哎表示什么呀？哎不放大元素，但是什么呢？诶通过该样式可以干嘛呀，开启我们这个has料啊has料这是我们一个副作用最好的方式，甚至我感觉它比谁呀，比我们那个O。

Hidden干嘛呀，还要强一些啊，还要强一些好，那所以我们以后解决I6的问题就什么呀，就来一个ZOO1就OK了，但是这里边就带来了一个新问题，A6好使了，对吧？破狐狸好不好了？哎，不好了，G里呢也不好了，来看我们这个。

这是谁呀，IE7，哎，IE7还零是吧，IE70IEIE8不就废了呀，哎，包括我们IE11是不是也不行了呀，哎，也不行了，所以注意这种方式只支持什么呀，只支持我们这个IE啊，只是IE还是还得IEIE8以下是吧？诶IE8以下，那所以这里边我们问了兼容所有浏览器怎么办？诶两个都写上，写一个ZOO1，我再写一什么呀，Overflow p保存，现在一刷新IE6也OK，然后再看火狐是不是也OK啊，是不是也OK啊，然后我们来一刷新，这是我们艾叶11也OK啊，也OK，所以注意要我们要兼容I叶六的时候，要写这两种方式，一个是zoo母一，一个是overflow hidden啊两种方式，哎，那我们来说啊，这个zoo母zoo母这个样式指什么呀？指在我们这个IE中干嘛呀支持其他浏览器干嘛呢都不支持，所以这玩意你写在这儿，人家火狐啊干嘛呀，压根人家就。

不看啊，压根就不看，所以这块写直接放这就行了啊，所以以后你要去解决我们这个高度差价问题，你就记住两行代码，一个是我们这个overflow hidden，还有一个是我们什么呀，ZOO1，这样就可以兼容我们这个所有的浏览器了啊所有浏览器了，好，那这里边儿我们先停一下听明。