17.尚硅谷_css2.1_清除浮动.wmv原创

好，我们再来看。好，那其实这个BFC其实我们差不多都要讲完了，那我们讲了一节课BFC，那这一块的话，其实最后一个规则，我们说计算BFC高度时，浮动元素也能参与计算，这其实跟我们的清除浮动有关，懂不懂，那这个规则待会我们讲清除浮动的时候，我们干嘛来验证，能明白吗？你们要记住的是BFC的这五条规则，那第五条规则我们说BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面元素，也就是大家想想我们溢从一个快子元素里面溢出来的东西，它可能影影响到其他的一些布局吗？不会吧，是不是啊，就是这个规则知道一下就行了，并没有太大的用处，懂不懂？那第四条规则其实能扯，扯出我们前在一个比较重要的东西，清主浮动啊，我们看一下什么叫清除浮动，好，给清除浮动我们来下个定义。好，什么叫轻祝浮动好零七，那直接贴一份吧，CTRLC加2B。

零七我们来说一下清除浮动。好，清除浮动好，什么叫清除浮动？其实昨天有提过清除浮动的一个概念了，还记不记得？什么叫青春浮躁？清楚不动是干嘛？是让什么让浮动的子元素可以撑开负极的，是不是负极的高度是不是啊？好，我们来看一下怎么做。好，这边有六种清浮动的方案啊，大家必须都知道，好，而且这六种方案不一样的场景，你懂吗？要选择不一样的方案，好，我们来看第一种清除浮动，好，呃，这样吧，我们直接建一个文件夹吧，啊，清除浮动。诶，正好我们来说一下昨天我们遇到过的问题，SN版本库里面遇到过，好教你。

我们车厢是不是都已经提上去了，如果我在这边接个文件夹就要清除不动。好，请左浮动。好，比如说是零七吧，好，零七里面清除浮动，好现在我是不是要把这个东西给移进去啊，不他会报错啊，待会提交的时候会报的吧，那昨天我教你们的话是CTRLCCTRLB吧，是不是啊，好，再教大家一个比较暴力的，那本来不想教你们，因为这个方法太暴力了，可能有时候会出问题，可是我工作当中我就这么用的，好像三年多也没也没出什么问题，来看一下。我我我整完了呢，我先给他。断开链接。然后干嘛直接在这边改名字，现在其实你做的任何操作，艾V都不会帮你去记录，能明白吗？就是说你干嘛，你现在做的任何操作，你干嘛都没有，都没有什么关系，比如说改，改成零一浮动之后，干嘛再给他移到这个。

清除浮里面去，是不是最后再给他。连接上去，然后我再去啊。提交。你会发现他不会给你报错，能明白吗？那这个方法有点暴力，可是亲测有效啊，基本上没什么出过问题，也可以去考虑一下去用它，因为比较简单，懂吧。好，来看清除浮动第一个怎么做好，我们说我们第一个方案，你不是要清除浮动吗？我想你浮动起来。你底下这个音呢，我让你们float为，我让你为left，本来它应该比如说本来有个高宽Y，本来有个高宽Y为个200PS，然后我这个也是一个。200PXNY再来一个什么，呃，背景是不是为pink好走NY那上面再来一个什么外。

是不是w rapp啊，Wa rapp来个外外的时候我干嘛，我给他秒一个边框EPX的实心好看，能不能撑开来。发现拆不开来是不是好怎么办？清除浮动，我说不就是让浮动的子元素乘加负极的高度吗？问你最暴力的方式是干嘛？给你加厚度不就得了吗？可不可以啊，好，这种暴，这种是最暴力的方案，可是能加高度，为什么不加高度呢？懂吗？所以这种方案，你有时候你一个浮度为你就让它浮动的，你我也不要用任何技术手段，让我这个浮动的减速去撑高我的负极，我直接给我的负极加高度，能加高度就要加高度嘛，懂吧，OK，那这也是，这也算一种方案啊，不过有点low，好再来看。好，还有什么方案？好，CTRLCCTRLB，我们刚刚说了BFC里面第四条规则是什么？BFC里面的第四条规则是什么？

计算BFC的高度时，浮动元素，浮动元素也参与计算，什么意思啊？如果你一个容器开启了BFC，它里面的这些子元素浮动了，这些浮动的元素BFC能不能感觉到它们的高度？能能理解吗？那怎么办？那清除浮动就好做了，怎么清啊？是不是你这个web跟高就想要被这个子元素给生下来啊，我让你外over危害，你信不信？可不可以啊，这个时候外是不是一个BFC。BFC能不能感觉到它的浮动元素的存在好看，有没有乘？撑开来吧，你看如果没有这个of。能撑开来吗？撑不开来好啊，这也是一种，那既然什么，既然有这种形式，大家看我让你的行为，而不是落的行行。来看一下position we。

BFC开启的规则根元素float的属性不为now position为呃，或者fixed or不为visible display为音量格，问你啊，那这个时候我问你，我现在这个写法大家来看。现在这种写法有没有开启标志啊？看见没有好，能不能撑开？撑开吧，可是我们看跟刚刚是不是有不一样了，好我们说一下，这边得说一下，好这边是用什么，我们来看第一个，第一个我们的实现的一个手段是什么。第一个我们实现手相是什么？零我们实现什么？直接给负极，很暴力，直接给负极。负极加高度好，这是一个好，第二点呢。我们说什么？零二是什么？通过开启BFC是不是啊，好，你这边定位over行不行，我外面我就已经不动了，可不可以。

是不是一样也是可以的，只不过现在好像干嘛，你看浮动跟定位，这是定位版，这是什么浮动的吧？好，这里面要说一个小细节，什么细节，如果是浮动定位的。动和模型浮动盒子的特点跟什么？呃，特特点跟定位合子的特点。好，他们呢，高攀。都有什么内容？撑开好，那不管你是现在是个div还是什么，只要你浮动跟什么，只要你浮动了或者什么，只要你开始定位了，那它的高杆就是有那种撑开的，能明白吗？好，默认情况下快元束的宽度是拿的负极的百分百，能理解吧？好，内力元素是靠电容撑开的是不是好它其实我问你浮动完了之后是不是特性有点像音暗卡。

能不能理解啊，好，那稍微说一下，好再来看，那这是第二种方案，再看第三种方，第二是开开启标C啊好，第三种方案零三。好，第三种方案怎么办呢？好，我也不让你开启BLC，我也不去浮动第三种方案，我直接在你底下加一个BR，好，BR有一个属性叫做。肯定尔肯定亚属于它一个属性是叫做哦，来看一下能不能清楚。清楚没有，清不动了吧？好，再来看还有，还有方案，这叫BR标签清不动零三。好，这个给他干掉正常么？BR标签请浮动。好，再来看零四。

好怎么去进行互动，好有一个BR标签，你也可以在这边去写个空标签。好，你给他一个class，呃，不用给你直接写那个样是吧，直接在边死掉干嘛呢，它有一个属性叫clean定啊为boss好来看一下能不能切浮动。能不能好，这叫空标签。轻浮好问你D03跟零四一样吗？零三是不是用的B2的一个什么，问你这叫CSS吗？这是不是SS，是不是啊，不是啊，这是HTML标签的一个属性。这个才叫CSS，这是HTML调，这是H这什么div标签调属性里面的一个样式。能明白吗？好，这个style叫STEM的属性，这个肯定是CSS的属性，能明白吗？完完全全是两样东西，懂不懂之后我们会很深入来跟你讲，这是什么东西，这个是不是在动物里面叫属性节点啊？

能不理解，好，那这上面有很多分法，之后我们来讲啊，OK，那这是两种不一样的形式，好，再来看还有什么新新不同方案呢，想想。呃，有直接给高度有干嘛，有开启BFC是不是啊，还有什么。还有BR标签，还有空标签是不是啊，我记得有六种啊，还有我们最常用的伪元素吧。好，来看，我记得是有六种的，我看一眼啊。好，给负极加高度，是不是给负极加浮动空标签压标签over吧，诶这哪个我们没有讲到。啊，我们不是把这个跟这个什么二跟五是不是都是开开启标C的放到一块去了吧，是不是好，那我们再再来讲最后一个好，最后一个轻标签的形式好CTRLCCTRLB05。

好，清除浮动好。零好，我们看零四有没有写。零四空标签清零三呢。BR标签氢好零五呢，好为元素。好怎怎么写，其实我们昨天已经写过了，是不是他要清浮动啊，是不是这个外壳清浮动啊，给这个外壳加一个什么。嗯，我先把这个干掉，这个D可以不用了，给这个外per加一个class，叫做肯定啊fix这个名字可以随便取，你可以叫小飞张，都是一样的，好怎么起怎么玩，首先来一个点小飞张是不是，然后呢，我们说你是不是叫room为一啊，然后呢。它是不是应该有一个阿尔不元素啊，然后呢，它的contain应该为空，然后呢应该为block，然后呢肯定为。

Boss，其实这种分法大家想想是不是跟我们004是一样的，只不过我是现在这边直接加了一个标签嘛，他呢。加了一个伪元素进来吧，可是这个东西到底是干嘛的，是不是还是不知道，好我们可以来看一下，那现在五种轻浮动的方式都是不是已经告诉大家了，大家需要知知道的一种是什么BFC的氢法，一种是什么伪元素的氢法法，为什么伪元素的氢法要这么去写？好我们可以来看一下。如果你不写这个，比如说我们一个来看他们的缺点吧，好不好？第一个大家看零一直接给负极加高，它的缺点是什么？扩展性不好。因为高度被我定死了是不是？好？来看0202这种氢浮中的形式，通过开启BFC吧，好，告诉大家IE67里面压根就没有BFC1说，好我们可以来看一下，比如说你现在让你overflow ahead是不是啊？好，你overflow大家看我来打开我的I6。

Control。打开我的IE6。好，这里ctrl a ctrl v好看有没有清除浮动。好，IE6跟IE7里面没有BFC，可是它存在着另外一个东西叫做。Has lay out什么叫has lay out？好，Lay out是Windows IE的一个私有属性，它决定了元素如何对其内容定位和尺寸进行计算，也就是说，在I67底下，这个尺寸怎么去计算，完全是依靠谁？零奥的，那为什么有些元素压根就没有办法去计算自己的尺寸呢？好，我们来看一下，呃，理论上来说，每个元素都应该可以控制自己的尺寸跟定位吧，就是每个元素都应该应有布局，这只是一个理想状态，对于早期的IE的显示引擎来说的话，他们做的比较烂，早期的IE显示引擎这个性能做的比较好，这是IE引擎设计的不好，整个性能问题很大，你如果在早期的I引擎上面，如果你让所有的元素都拥有布局的话，会导致很大的性能问题，能明白吗？会导致IE67这个浏览器特别特别卡，然后IE的团队怎么去解决的呢？IE的开发团队决定使用布局的概念来减少浏览器的性能开销，也就是说，并不是每一个元素它都有拥有布局，只有拥有布局的元素才能决定自己的这个之后，这个布局应该什么，怎么去展示，也就是什么，如果你有浮动的子元素，如果你这个负极没有去拥有布局，那是撑不开它的高度的，能明白吗？除非。

你让他去啊？拥有布局能明白吗？你看默认拥有布局的元素里面有D吗？这是I6起加默认拥有不均的元素，里面有div吗？没有，那怎么去触发I6起加的还料子呢，好，这种形式里面。

有overflow head吗？没有吧，好，那看现在是不是在A里面没有办法，干嘛撑开高度啊，好怎么办？你不但要写一个O，你是不是还得触发这个，是不是只是触发什么。BFC啊，你触发完BFC，我问你I就去下，他有用吗？没有用，你是不是还得让他干嘛拥有？拥什么拥有布局啊，那拥有布局怎么做。来看一下怎么触发II6含量的可不可以浮动display定位是不是也行啊？你有外视值是不是也可以啊？除了凹凸之外的任何值都可以吧，还有呢。Room room是不是有缩放的意思啊？问你如果我在这边缩放为一会对你的元素造造成任何影响吗？缩放唯一不就是没有缩放吗？是不是来看一下A底下刷一下高度有没有被撑开了？

好，这是怎么称得来的，是开启BFC称得来的吗？不是，是触发了还是标能理解吗？所以说你光写一个O的话，是不是有交性问题的，好，那这个得知道一下好。零二，好，那你也得知道什么是海洛塔，你可以把凯子零二呢认为是I67之下的BFC可不可以理解啊？好，来看一下，那我们现在来看。看零三这种形式，零三是不是鼻压，鼻压线标签啊，我就不说了，鼻压线变那干嘛，结构样式行为不统一嘛，而且我们看一下如果这种氢形式在I6底下，会会不会有什么问题，看一下I老祖宗。打开A6 ctrl a ctrl v好接进来看它有撑开吗？是不是BR轻标签这种形式在A6底下是没有不起作用的，能不能，所以说这种方案干嘛兼容性不高，能明白吧？好，第四种方案呢，大家看也是一样，去I6里面看一下。

好，再来一个。Con。好，CTRLB好，是不是好像没有什么太大的问题啊，好来看一下我们这个时候怎么写的，是不是它是div clear为啊。好像没什么太大的问题吧。来看。哎，我记得有一个最小高度的问题。呃，来看一下怎么把这个问题给演示出来，现在是不是我这个div里面什么东西都没有啊，如果我写个东西呢。刷一下是不是有一个高度的，你把这个，哪怕你把它这个Y大家看，哪怕你把它的hat，你把这个hand哪怕调成零，大家看。

他有变成零吗？没有吧，这是I6底下的一个问题，I6底下有个最小高度的问题啊，这里面有什么19像素的一个最小高度啊，怎么解决，你可以给整体的什么，你可以给整体的这一块来个什么，放来个方size，放size为零，那这个高度就会变小，可是没有办法全部解决，解决完之后它还会剩下两两项数的空隙，能明白吗？好，这是A6加一个问题，而且啊，我们说这种形式底加的话，如果你不写A，确实是没有什么问题，你看在一六加的话，因为你没有，诶刷一下你是不是在这边去指定高度了，你千万不能指定高度，一旦你把这个东西指定高度，大家看如果不指定高度是不是就没有没有太大问题啊，可是它不符合我们一个规则叫什么？结构样式行为相分离吧，你是不是把把这个嘛样式写到直接直接写到什么结构里面去了，能明白吗？就是说这种轻浮的方式我们也不建议，而且你得知道它有一个问题，如果你里面有元素的话，在I6底下有个有个什么问题啊，最小高度为19项素，能明白吗？哪怕你把它的方向设成零之后，它还会剩下两项速度空隙，懂吗？好，那这是一个问题，好那这是我们说零四清除浮动零嘛，一个不好的形式，好我们来看零五，零五清除浮动，好是不是一个伪元素的形式啊？好，大家看，如果我不加这个东西。

来看I1。A系列，好。05CTRL a ctrl c好切到这个里面。切到这里面来，好，新建一个好CTRL完毕。No。好可能就要V，好只要你进来，你看有没有前开高度没有，这是为什么，因为在I167底下啊，来看一下在I67底下是干嘛I。6I7底下不支持五元素好怎么解决啊，现在是不是A6几加不支持五元素啊，那你浮动是不是就就清不了了，怎么办？开启。

Has。I67加就可以了，就你来找到我这个I1I6，好，我来刷一下，OK，是不是就已经干嘛可以清除浮动了，好这是我们说的六种清除浮动方案，以及每一种方案它有什么样的问题，我们最主流的是哪一种？第五种为元素。这种形式。能理解吧？好，我们稍微来总结一下清除浮动这一块。的一些问题，好这里，好，我把这个浏览器关掉，好庆祝浮动这一块稍微的来给大家去总总结一下，好这里。请祝福到，来个麻辣烫。

清卓。浮动好，现在我们清除浮动总共有几种形式？好清除浮动。总共起色。第一种给。负极加高度，他有什么缺点？扩展性不好好第二种是什么开启。BFC是不是好几种形式。欧洛为。为hid还有什么？你可以使用定位，你也可以使用什么浮动，我问你这些属性都是加给谁的？负极的吧，OK，好，它有什么一个缺点。

它的缺点是什么？IE67底下不支持BFC，压根都没有BFC这个概念，我们可以来看一下，比如说现在这个零二，我是不是OPPO A看好，我如果不让它运用布局看一下，再IE起一下行不行？A6加是不是刚刚已经看过了，它是不可以的，好看一下一期。刷一下可不可以啊？好像可以吧，来看一下孩子out。好还你看在H底下以下属性也可以触发还是什么有没有。有没有，本质上你这行代码在I it底下，现在我是不是也没有让你用布局啊，为什么在it底下它也是好的，因为你O罗海在I底下是可以触发海了，能明白吗？说在IE67底下为什么可以进触不动，就是因为你这个元素它拥有了布局。

能明白吗？OK，你得你得清楚一件事情，就什么海塔这个几种方式，IE67几下都支持，都可以开启塔懂不懂这个方式只有在I7底下才支持，能明白吗？说还有一个事情，就是IE67是没有PFC概念的，你想要清除浮动，只能去触发has has，你可以认为是I167底下的。BFCOK。整理好我们来看那这种I，因为是ID是BFC嘛，所以说他也不是很推荐，那第三种形式呢。是什么BR标签BR标签我们说什么IE6。不支持，OK，第四种呢，空标签是不是空标签，它有一个什么不好的地方违反了。

结构行为结构是指什么？还没啊，结构行为样式相。什么？相分离的原则，其实之前这个BBR标签它也是违反这种原则的，而且它A底下不支持懂不懂，可是中标间这一块，我们还得知道IE6IE底下的一个bug，比如说IE6下最小元素的最小高度，只要你给它之间的高度，那这个最小高度就为19PX，那哪怕你给它写18，写17，写零，都会最终渲染成19X，怎么解决？可以尝试给元素干嘛方S设为零，可是这种解决方案最终也只能干嘛解决，把它解决成什么？

两项数，它还是会有两项数空隙，知不懂？这是I6提交的一个问题，好，我们说最主流的方案应该是是一个什么样的方案？伪元素加开启has out，好，我们说什么？为什么是这种组合，因为IE67下。不支持为元素，所以干嘛要额外的去开启has？OK，那这是我们最主的一种清除用形式懂不懂？好，那说完这个清除浮动，我们来给它做个应用，好之前我们是不是做了一做了什么CSS一个负的布局啊好，问你这个CSS是一个负的布局，大家想想这个CSS是一个负的布局，你外的这个高度会不会直接影响到我这个负载的位置。

能不能问你外里面如果要有浮动元素外要不要去浮动。不然你这个服装元素跟这个负载会它会不会重叠。反正你只要是你的子元素，你就应该把我的外部的高度给撑开来，不然的话，我整个布局就会乱掉，能明白吗？所以说这个时候我们其实还少少干了一件什么事情。你这个WiFi要干嘛，清除浮动，你可以直接给他干嘛，如果简单一点直接干嘛。Overflow就可以了，懂懂，而且overflow这个东西在移动端用的特别广泛，大家想想现在Windows中还有吗？但如果不考虑IO洛为hi的这种开启BFC的形式，是不是兼容性也蛮高的是不是？那在移动端问你。

还有IE存在吗？Windows风是不是已经没有了，所已经没有IE存在了，懂不懂，所以说在移动端轻浮动一般就是这一条样式，懂不懂PC端轻浮动呢？你得写这么一大坨。能明白吧，OK，好，这是我们说的一个轻动，好，大家来看一下。