尚硅谷前端基础 (64)

好，那么有关于浮动的话，那其实使用起来就是这么多，它本身并没有什么，没有什么难度啊，它主要的作用就是让一个元素横过来啊，目前来讲对我们来说就是让这个元素横向排列，那说了它这么多一些特点，那难道说浮动就没有一些缺点吗？哎，换句话说，这个东西本来并不是诶W3C给我们提供了一个布局的手段，它本身是让文字去环绕图片的，但是我们去拿它来作为我们网页的一个很主要的一个布局的手段，那这样。他难道说不会给我们带来一些问题吗？哎，当然会有问题，那是什么问题，我们来看看，在这儿我们来新建一个文件，那浮动的一个最典型的问题，我们叫做一个这个高度塌陷的问题啊，高度塌陷的问题，那其实我们来说一下，像刚才我们写的这个网页布局，它存在一个这个小的问题啊，小的问题什么问题呢？就是一定注意。

像我们在写PC端的页面的时候，通常情况下，或者说有一些情况下，我们的宽度啊，一般情况下宽度都是写死的啊，一般情况下宽度都是写死的，或者宽度会指定一个范围是吧，你到哪到哪儿会有一个范围，宽度我们不考虑了，但是我们要说一下我们高度，像这种情况下，你看啊，我们主要说中间这个区域，中间这个区域的话，我们的这个高度是写死了，我记得应该写的是写的是500对吧，这写的是一个500，高度已经被我写死了，高度被我写死了会存在一个什么问题，诶如果我的这个网站像京东一样，诶，这儿的内容，这儿的内容，这儿的内容都是固定的，那么一点问题都没有啊，一点都没有，你就写吧，无所谓，但是假如说假如说什么呢？假如说你这里面的东西的长度是不定的，有可能我这内容挺多，还有可能我这个内容挺。

不少因说内容的大小是会发生变化的，那这个时候你把这个高度500给写死了，会出现什么问题？如果你的内容特别少，那会是什么情况？诶，OK，我这元素这么大个，我这内容干嘛呢？哎，就这么点，这一块都是空的，是不是很丑啊？哎，很丑这是一个。还有一方面，如果你的内容很多呢，内容很多已经超过这500了，那会出现什么？是不是内容溢出啊？诶内容一出是不是导致这块会多出一个内容啊？哎，多出一个东西同样是不是？也很丑啊，哎，也很丑，所以一般情况下我们很多，呃，不能说一般情况下吧，很多时候像这种负元素的高度，像这种负元素的高度我们是不会写死的，因为你只要一写死，那就意味着你的内容大小就固定了，所以往往我们是希望什么呢？诶，希望是你负元素它可以根据什么呢？根据内容的多少来变高或者变矮，内容多你就高点，内容少你就矮点，它是可以根据内容去变的，那这样就意味着我负元素的高度还能不能写四。

就不能写四好，那我们来看，那这样怎么写，写一个页面在这里边呢，我们创建一个div div点一个al o啊，点一个al，我们给它运行一下。哎，运行出来这个aler呢，Aler我们给它设置一个样式style标签，那现在呢，假如说这个aler就是我外边这个元素，我希望它的高度是跟随这个子元素变化的，子元素高它就高，子元素矮它就矮，是这么一个东西，那这个时候我们给它设置样式啊，点一个aler，那这里边注意了，那像这个aler我还能不能给他写高度。

不能写高度了，只要你写成高度，那就是写死了，所以高我们就不写了，不写是不是凹凸，凹凸是不是等于就是被内容撑开啊，哎，高度不写了，宽度我也不写，诶宽度你就全拼就好了，我就不写宽度了，但是为了能看见它呢，我给他设置一个BO10个像素，一个red，一个solid，我给他设置一个十个像素的边框，但是现在你会发现这就出现一个边框，为什么呢？诶，因为现在它的高度是被内容撑开的，现在它里边有没有内容，没有内容就意味着现在它是它的边框合到一起了，合成这这么一个状态，哎，所以要知道它是为什么啊好，那现在呢，我在它里边呀，我再创建一个点，一个这个inner，哎，创建一个子元素，然后呢，在这儿我们来给它设置样式，由于啊我没有给aler设置样式，所以这个时候效果就是inner多高，Inner多高，那么al就多高，你看inner是100，它是不是被撑开100啊。

哎，所以我写一下100，哎，然后呢，Background color background color，我们来一个井号BFFA，那这个时候你看我现在这个al的高度是不是由in特决定了，In特高，In特尔200了，它就变成200 in特300了，它就变成300 inner500了它就变成500 inner变成1000了，它就变成1000，那这样现在的效果就是我们的al它的高度是被in字所撑开的，因而多高它就多高，那这样我们就不会因为内容过少而出现大量空白区域，也不会因为内容过多而导致子元素是不是从负元素当中溢出啊，哎，但是问题。还没完呢，现在我只有一个音呢，那假如说我这里面有好多元素，我需要这些元素干嘛呢？横向排列，横向排列，那就意味着我是不是要让我这个所有元素是不是都要浮动，那假如说我现在就inner一个，我现在让inner浮动，我们来看看效果啊float，我们来一个left看效果。

完了是不是？浮动了，浮动以后的话，其实无论是al还是in的，他们的位置都没变，但是很明显一个问题，Al那个高度还有没有了高度。没有了，高度没有了，那这个就是我们所谓的一个高度塌陷的问题。高度塌陷的问题，这个是我们在浮动里面会遇到比较多的一个问题啊，我们要说一下高度塌陷的问题，我们说了在我们这个浮动的这个布局中，哎，我们什么呢？哎，我们这个负元素的高度默认是被那个什么呢？子元素撑开的啊，默认是被子元素撑开的，但是什么呢？当我们这个子元素浮动后啊，浮动后其为什么呢，完全脱离轮档流，那子元素从什么呢？从文档流中脱离，哎将会什么呢？将会无法撑起这个负元素的高度，导致复元素的一个高度丢失，这么一个问题，本来是什么情。

啊，本来这个是它，然后呢，我里边一个子元素，子元素是不是好好的把负元素的高度就给撑开了，哎，撑开了，但是当我给子元素设置浮动以后，子元素就像一个气球一样，飘飘悠悠飘飘悠从这个负元素里飘出来，飘出来以后那负元素是不是就没人撑着它没人撑着它怎么办？它就高度就塌了，高度就塌了，那这个时候我们就看了，好像似乎我们子元素负元素的位置，它好像没受什么影响，对吧？所以我们要先看看这个问题，它是不是问题，如果它不是问题，我们就不用处理，如果是问题我们是不是必须要处理，怎么看它是不是问题，我们主要就看什么，看它会不会影响到别人，也就是说如果你浮动了以后，你高度塌陷了，就你俩之间有点变化，那OK，你俩爱怎么折腾怎么折腾，那无所谓，不要影响到别人，但是一旦这个行为影响到我页面。

你的其他元素了，是不是可能会对我页面中的布局产生一些不太好的效果呀，哎，所以为了看一下我们在什么呢？我在下边啊，我创建一个元素divv创建一个元素，我直接呢，希尔横列样式啊，横定样式，我们这儿来一个来个100PAD，来一个100BA。

G，我们来一个yellow。好，写这么一个啊，写这么一个，哎哟呵，出啥玩意儿了，刷新一下，刷新一下，现在呢，我先不让他浮动。好，现在看现在是不是高度没塌呀，哎，高度没塌，这个是我们的这个，这是我们这个inner，这是我们这个alter，哎，正常反应啊，那现在呢，这个我设置这黄方块就在这儿显示出来了，那现在啊看着了我这儿呢，我把这float left给打开，打开以后呢，Inner浮动，浮动以后al高度塌陷，哎但是你说塌塌塌塌了，但是谁还有也有问题，哎是不是我们外边那个黄色div是不是也上移了，哎也上移了，为什么上移开始为什么在这儿，为什么在这儿，就是因为是我们这个al特，是不是给它挤这来了，但是现在al特高度塌了，Al特高度塌了，Al是不是现在只占这个地方，哎只占这么大小，这玩意儿inner又不占空间，所以我们这个黄色div是不是自然而然就拱上去了，哎拱上去了，那现在这种情况，你就假设什么呢？假设像我们刚才那种情况，哎，我这个把它打开一下。

假设像我们刚才那种情况，那就是什么呢？这三个元素本来是撑起负元素的高度的，然后他们三个一浮动这个负元素高度就塌陷了，塌陷以后这玩意儿干嘛了，它拱上去了，你就说底部跑到我们中间这块了，那这是不是就不对了，哎，就不对了，所以这样行不行？不行啊不行，所以这时我们来说一下高度塌陷，哎将会无法撑起复元素高度，导致复元素的高度丢失，负元素高度丢失以后，哎其下的元素为什么呢？会自动上移啊自动上移哎导致什么呢？导致我们这个页面的一个布局混乱，所以注意，所以高度塌陷是什么呢？是我们这个浮动布局中，哎比较常见的一个什么呢？啊比较常见的一个问题，而且这个问题我们什么呢？这个问题我们必须要进行处理啊，这个问题必须要进行处理，那怎么处理，怎么处理。

怎么处理？其实它并不难啊，或者说没有我们想象那么难，那首先我们来看之前我们写这个网页布局，它为什么没有出现高度塌陷的问题，为什么？哎，因为什么？因为这个复元素的高度不是被子元素撑开的，这个负元素的高度是被我们写死了，哎写死了以后，它自然而然就不会塌了啊，就不会塌了，所以这个时候呢，哎，我可以干嘛呢？我把这个凹T的高度啊，我写死，我写成什么呢？写成一个100，写成一个月100，这时候还塌不塌了，哎，不谈了，所以解决高度他现很简单，你干嘛呢？哎，你把负元素的高度给他写死了，高度就不会再塌陷了，但是这有没有真正解决这个问题，没有，因为开始我们希望我们再去做这个东西的时候，我们就希望负元素的高度能被子元素撑开。但是现在。

你把高度写死了，是不是又变成我们原来那个状态了，变成什么状态了？变成了那个？那个那个。东西少有空白，东西多会溢出这么一种情况，所以给复元素高度写高度的确能处理这个问题，但是它并不能满足我们的全部需要，就是当我们希望负元素的高度会跟随子元素跟随内容变化的时候，它是不能满足的，那这个问题我们要怎么解决啊，怎么解决？那这里啊，我们要提到一个概念，提到一个概念叫做一个BFCBFC叫做什么呢？叫做一个B，叫做BLCK啊，它是缩写啊，BK叫做for ma，诶。

哎，Forming啊forming，然后C叫做啊context，这个叫做一个BFCBFC叫什么呢？叫做块级格式化环境啊，这个东西叫做一个BFC，这个名啊听起来很奇怪啊，很奇怪，那这个是一个什么东西啊，是一个什么东西，那这里边呢，我们直接说一下BFCBFC是一个我们这个CSS中的什么呢？一个这个隐含的属性，隐含的属性啊，隐含的属性，那我们说了，我们可以为一个元素开启什么呢？开启BFC啊，开启BFC，开启BFC以后，开启BFC以后我们的什么呢？我们的这个该元素会什么呢？会变成一个独立的布局的一个区域啊独立的布局区域，所以为什么叫块级格式化，你又可以理解成是一个布。

局环境啊，布局环境也就说可能是之前啊，我比如说我现在没有开启BFC，没有开启BFC的时候呢，我们来看这页面，这页面它们是一个整体，是一个整体，无论是我们这个al也好，In也好，还是我这通过内联样式设置这个div也好，它们都是一个整体，他们都是一个整体，他们在一个大家庭里，他们属于一家，所以这个时候他们的布局是怎么算的，是整个算的，我的inner和al算，哎，然后再和这个这这整个算，也就是说他们需要整体去计算，但是当我为一个元素开启BFC以后，比如说我给我的这个。

Al特开启了BFC，那这个时候它就变成了一个独立的布局区域，也就是说它这里边的区域的特点跟别的区域会有一些不同啊，会有些不同，那我说到这儿你可能还不太好理解，那我就直接跟你说结论。首先你要记住BFC是CSS中的一个隐含属性，它的名字叫做块级格式化环境，然后开启BFC后，该元素会变成一个独立的布局区域和其他的块。不同啊，和其他块不同，那这个时候我们就直接说了，我们直接说什么呢？诶元素开启BFC后的什么呢？后的一个特点，其实我们主要说这个，哎，我给一个元素开启BFC以后，这个元素会具有一些它没开启BFC时的一些特点，我们要关注的就是有哪些特点，哎我们来说第一个特点，第一个特点叫什么呢？哎，开启我们这个BFC的元素啊，开启BFC元素，它不会被我们这个浮动元素所覆盖啊，覆盖什么意思？这是一个BOX1，这是一个BOX2，哎我们给BOX1设置浮动，设置浮动以后，我们的BOX2是不是要上移啊，诶上移，那默认情况下BOX2会被BOX1给盖住，为什么会盖住？因为现在BOX2和BOX1你可以说他们是在一个布局空间里的，他们是一家人啊，所以一会盖住二，但是。

当我给BOX2开启了BFC以后，那注意了，现在一和二就不在一个布局区域里，不在一个布局区域里，那就意味着一盖不住二，所以我只需要给二开启BFC，那么二它就会在一的边上，而不会被一盖住啊，而不会被一盖住，所以第一个特点，开启BFC元素不会被浮动元素所覆盖，第二一个开启BFC的元素，哎，我们说么呢？哎，我们这个子元素和负元素的外边距，它不会什么呢？哎，不会重叠什么意思？之前我们说了这一个元素，然后呢，这里边一个子元素，你给子元素设置一个margin top，它不是移动子元素，而是把负元素和子元素一起往下移啊，一起往下移是不是这个距离会在这儿啊？哎，这是我们说的外边距的一个重叠的问题啊，重叠问题，那这个问题怎么解决？我可以直接给它们的负元素开启一个BFC，那这样。

啊，它的负元素和它的外边就变成了两个独立的布局环境，这个时候外边距就不会传递了，你给它设置外边距只会控制它的位置，而不会控制负元素，所以开启BF元素子元素的外边距和负元素不会重叠，哎，但是这个东西对我们来说都没什么用，对吧？都没什么用，目前来讲啊，我们这个问题来说都没什么用，所以我们要说的就是第三一点，第三一点叫什么呢？叫开启BFC的这个元素，哎，它可以什么呢？可以包含这个浮动的子元素啊，可以包含浮动子元素，本来你不开BFC元素一浮动，它是不是会导致高度塌陷呀，但是你只要开启了BFC啊，只要开启了BFC，它都会什么呢？诶，就可以包裹住我们这个浮动的子元素，就不会再出现这个塌陷的问题啊，不会出现太大问题，好，那我们来看一下，我们来看一下，但是我们其实要。

利用的BFC的话，主要现在来讲啊，主要就是利用了一个第三点啊，主要利用一个第三点，但是问题是我们如何开启BFC呢？哎，那注意了，BFC是一个隐含的属性，它没有办法直接开，你说我来开几个BFC了，不行，不能像什么什么这个设置字体啊，设置颜色，那么直接它需要通过什么呢？一些特殊方式，哎，我们可以通过一些什么呢？特殊方式来开启我们元素的一个BFC，比如说比如说什么呢？比如说第一个我们可以设置我们元素的一个浮动，哎，浮动，所以啊，其实开启BFC比较典型的第一种方式就是可以设置元素浮动，好，那现在看啊，我给inner设置一个float left，现在inner向右浮动，向右浮动以后高度塌陷，它是不是高度没了，哎，高度没了，那现在我希望。

那可以包含住这个音的，那怎么办呢？诶，我就需要开启al特的BFC，以使它的高度可以被它撑开，那这时候我就需要干嘛呢？开启BC了，怎么开一种方式，我直接设置一个float left，注意给谁设置的，这个时候我是给aler设置的，我让al float left以后就开启了al的BFC，开启了它的BFC以后，Inner就可以被al高了，这时候你看高度他塌，诶高度没塌就不塌陷了，为什么？就是因为它开启了al特的。

BFC，但是其实你会注意到两个问题，第一个，哎，高度确实没它，但是什么没了？宽度没了，为什么？因为脱离文档流了吗？脱离文档流那宽度也被内容撑开了，对吧？宽度没了，并且那小黄块跑哪去了？哎，小黄块被它给盖住来，我把那黄块给它调大点。小黄块被他给盖住了，哎为什么盖住了，哎，因为你浮动了，它浮动了它自然而然是不是就上去了，哎，那这时候布局是不是也乱了，哎，那怎么办呀，你就让二也浮，那那小黄块也浮动呗，哎那就太麻烦了，所以这里边我们要说的话，Float live呢，它会开启BF，但是我们所有的开启BF的方式，它都不是直接开启，它都是间接开启，所以这些开启BFBFC的方式，它都会存在着一些。

副作用float的left，开启BFC以后的副作用就是高度，它它的这个高度不塌了，但是它会从文档轴中脱离，诶，那这时候宽度是不是也丢了，如果你不希望宽度也丢，那这时候你就最好不要用left啊，所以注意所有的开启BF的方式都会有一些副作用，而我们要找的就是那些副作用比较小的。第二一个我们叫什么呢？诶，将我们这个元素设置为我们叫做一个行内块元素啊行内块元素，所以我可以直接来一个什么呢？来一个d play，我们来一个in赖block，把它变成航天快元素，变成航德快元素，也会开启它的BFC，这时候看到高度塌不塌了，不塌了，但是航内块也会有个问题，航内块不适合作为外部的布局容器，它会有些问题啊，并且你设置完行内块以后，宽度是不是又没了，哎，宽度又没了，所以这也会存在有副作用啊。

然后第三一个我们就不废话了啊，总之呢，开启BFC的方式有很多很多种啊，很多很多种，那我们要找的就是一个副盾比较小的，所以像前边两种啊，我们都得加括号，我们不推荐。不推荐使用这种方式开启BFC啊，当然不是说你不能用浮动，你不能用框那块，这都是可以的，但是不推荐你用这两种方式去开启元素的BFC，它的副作用比较比较大，所以我们要说的第三种就是什么呢？哎，将我们元素的一个overflow overflow设置为一个非什么呢？哎，Vis bile，哎，Vilew的一个值，Vilew是它那个默认值，只要它的overflow不是viiblew，就可以开启BFC，比如说我可以来一个overflow，我们来什么呢？我来一个这个visible，我们先看VI。

Ble啊，微缩设置完了没有任何效果，对吧？因为它本身就是默认值啊，你设置完了没有任何的效果，那这时候我们换一个，我们换一个什么呢？换一个score CL score滚，这时候来看看看，先看高度塌没塌没塌，宽度丢没丢，同样也没丢，这样是不是完美解决这个问题啊，但是问题是score默认是不是会给我们带两个滚动条啊，哎，非常的不好看啊，非常不好看，所以这个时候一般情况下我们可以用什么呢？我们可以用凹凸，诶凹凸高度探它没它并且也没有滚动条，或者用黑的，可能我们更习惯用黑的会比较多一点，这样黑的是不是也没问题，哎，也没问题，所以我们常用的方式，常用的方式，哎为我们这个元素设置我们这个overflow he，哎，以什么呢？诶开启其BFC。

以什么呢？以哎，使其哎可以包含我们这个浮动元素，那这个是我们用的一个常用方式，当然你用o flow auto的话也没有什么问题啊，也没什么问题，当然这两种方式都是相比较来说副作用比较小的方式，你看高度也不塌了，宽度是不是也没丢啊，并且下边元素是不是也没拱上来呀，所以它是副作用最小的一种方式，但是并不意味着说它没有副作用，只是副作用比较小，所以它是一个我们最方便最快捷的一个临时的一个处理方案啊，临时的一个处理方案，所以这里边原理是什么？代码很简单，就一行overflow hidden，但是你要知道它的原理，原理是干嘛了，当我给它设置完了overflow hidden，实际上是开启了这个元素的BFC，也就是开启了这个al b FC，开启了它的BF。

那以后它就可以包含住这个浮动的子元素了，就这么简单啊，好，这个是我们说的一个高度塌陷的问题啊，我们先停一下，自己先把这问题演示一下，然后尝试一下，思考一下，先明白了这个问题是怎么回事儿，然后记住我们是怎么解决的。当然这并不是一个最完美的方案，待会儿我们还会有一个比较完美，比较好的一种方式去解决这个问题啊，我们先来停一下。