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

是这个说我们的这个内容，今天我们先说一个问题，诶我们来我们讲完了浮动，浮动以后，我们说了元素是不是脱离文档流啊，哎，脱离文档流了以后呢，其实这个事儿还挺大的，那我们说了它脱离文档流以后，会不会给我们这个页面带来什么不好的地方呢？诶我们来说这个问题，第一个问题我们要说一什么呢？叫做一个高度塌陷的问题啊，高度塌陷的问题，那我们先来说说什么叫高度塌陷，那这里边我们先写个小的小的DEMO，我这来一个什么呢？来一个div div给它来一个东西叫做一个包，诶来一个这个class，我们叫一个BOX1，然后这里边一个子元素点一个BOX2，现在要来看它的关系，BOX1是负元素，负元素里边一个子元素是谁？我们这个box box2啊BOX2，然后我们来给他们写样式，我先写谁呢？我先写这个点一个BOX1 box1宽度呢，高度呢，我都不指定啊，都不。

指定我直接给他来什么呢？来一个borderder borderder来什么呢？来一个十个P像素，然后来一个red，然后来一个solid，诶我只指定一个bos机，只指定一个边框，诶为我们这个BOSS1设置一个这个边框，诶设置完边框，那我问你了，我没给它指定宽度，没给它指定高度，那它的宽宽度默认什么？哎是不是负元素的全部啊，哎，它负元素多宽，它这不多宽呀，它负元就是谁呀，Body，那所以我这个Bo机的宽度就应该和我这个浏览器窗口是不是一样的啊一样的，然后再看高度有没有指令，没有指令，高度没有指定，它就被什么呀，诶被内容撑开，但是问题来了，它的内容是不是也没高度啊，诶所以现在它是没有高度的，那我们来看什么效果，CTRL一行。哎，不会啥也没有的是吧，你以会有东西的，是不是出了一条大粗线呀？哎，一个什么呀，这是一个20个像素一条线，为什么呀，咱们想想本来是上下两个边块吧，但是中间这个内容区有没有高度啊，没有高度，所以这两边块干嘛了，是不是叠一块了，哎叠一块了，所以现在我们看到的是两条线，但是这里边我们来干嘛呢？我给这BO3里边随便写一个写A，我这一保存子元素干嘛了，是不是有高度了，它就可以撑开的这个这个负元素了啊负元素了来我这一刷新走，你是不是就撑开了呀？诶撑开了啊来那咱们这样不这么设置，我把这个嘛去掉，在我这个BOX2，我给它设置一样式BOX2我们来一什么呢？来一个这个wise来什么呢？100个像素，Hat也来一个100个像素，然后来一个background，一个color，我们来一个blue，诶那现在我们BOXS2的是一什么呀？宽100高100，这么一个蓝色盒子对吧？那现在我们说BOC的这高度应该多少，是不是100啊，诶它会被这个子圆。

元素撑开啊，被此元素撑开，所以我这一刷新走你，诶是不是正好100啊，哎100就冲开了，诶那现在我们来说一下这个问题啊来在我们这个文档流中什么呢？我们这个负元素的高度默认是被我们这个子元素撑开的，也就是说什么呢？也就是说子元素多高什么呀，负元素是不是就多高啊，哎负元素就多高，哎，这就跟什么呀，跟那个这个父亲伟大的父亲是吧，他永远能包容他的这什么呀，永远能都能包容他这个孩子，不论无论他这个孩子干嘛呀，长多大个父亲是不是都能包容他呀，哎，都能包容他，所以这里边我把他的高度改成什么呀，改成200，我给你发刷新走你，诶他父亲不是也跟他长啊，来跟他长啊，所以父亲永远都包容这个孩子，但是我们这有问题了，那有一天干嘛呢？这孩子，我们说干嘛了？翅膀硬了吧，是吧，他想。

飞出去是吧，他想飞得更高啊，飞更高那怎么办呢？我们来给子元素设置一个什么呀，浮动，为我们这个子元素设置向左浮动，当然方向无所谓啊，方向无所谓来一个什么呢？Float一个left向左浮动，我这一保存，咱们来看效果，现在呢，我一刷新走你。

哎呦，发现什么问题了，子元素的位置变不变没变，为什么没变，它是本来就在左边啊，你向左浮动左右它的位置是不会变的，但是我们发现什么情况了，负元素的高度干嘛了？是不是没了呀？哎，没了，换句话说，我们复元素是不是是不是塌了呀，哎，塌了，那我们来说这是为什么呀？哎这地注意啊，我们说了负元素的高度默认是被子元素撑开的，也就是说什么呀，子元素高负元素就多高，但是什么呢？但是当为我们这个子元素，但是但是当为子元素设置浮动以后啊，单位子元素设置浮动以后，子元素干嘛呢？子元素会完全，哎脱离文档流啊。

子元素会完全脱离氧瘤，此时干呢，此时将会导致我们这个子元素无法干嘛呢？哎，撑起我们这个负元素的一个什么呀，高度，哎，导致什么呀？哎，负元素的一个什么呀？哎，高度塌陷啊，负元素高度塌陷，说白了，子元素一浮起来，负负元素完了塌了啊，高度没了啊高度没了，那我们来说这东西它好不好啊，好不好啊，它会不会带来问题啊，那同学说了，那老师你干嘛非得给他设置边框呢？你不设置边框行不行？不设置边块，不设置边块一刷新我是不是看不出它来了，诶看不出它来感觉也挺好是吧，但注意了，我们现在给他整回来塌，现在会带来一个什么严重的问题，那么说了，我们在页面里这块是不是主要对页面进行布局的呀？诶布局的本来页面是一个这样的，我把这个浮动给它，对对保存，现在一刷新本来是这样的，然后干嘛呢？我在这儿啊，我再写一个，写一个div，点一个BOX3 box3呢，我们来给它设这个样式，点一个BOX3，我不设置宽度，直接来什么呢？来一个这个hat hat来什么呢？来一个这个100个像素，然后background color来一个什么呀，Yellow保存，咱们一刷新走，你本来是不是这样的呀？诶，咱们假设这一块是我们整个页面里边一个什么呀，主要内容，我们说了布局的时候我们有一个什么呀，Content主要内容，而这一块是什么呀，是我们那个foot特对吧？诶foot底边那个信息，那好了，那现在我们来干嘛呢？我让它这个子元素向左。

好浮动，那你注意了，子元素向左浮动以后，它是不是脱离导流了，脱离导流什么情况？负元素干嘛呀，高度塌陷我们来看有没有问题啊，我这一刷新走你干嘛了，是不是下边那个BOS3他拱上来了，哎，拱上来了，那这是为什么呀。

高是不是就是因为高度塌陷呀，哎高度塌陷啊，所以这里边我们带来一个问题，这一块是一个问题啊，此时会导致子元素无法撑取负元素的高度，导致负元素一个什么呀，高度塌陷，那我们说什么呢？由于负元素的这个高度塌陷了则什么呀？诶则负元素下的什么呀？哎，所有元素都会干嘛呢？是不是向上移动啊，哎向上移动那这样什么呀，这样将会导致我们这个液面的布局嘛呀，是不是混乱呀，哎混乱，所以这里边我们来说负元素的高度塌陷其实倒没什么，怕的是什么呀，你这一塌，下边元素是不是就趁机就拱上来了，下半元素一拱上来，你整个这布局是不是就就乱了呀，哎，就乱了，所以我希望什么呀，我子元素浮动，这是咱们什么呀，内部的事对你其他元素最好干嘛呀，是不是最好不产生影响啊，哎，不产生响，所以这里边这问题我们需不需要处理啊。

哎，需要处理，所以往往我们需要去处理一下我们这个什么呀，高度塌陷问题啊，所以哎在开发中干嘛呢？哎，一定要诶避免我们什么呀。诶避免出现什么呀，哎，高度塌陷的一个什么呀问题，避免出现高度太阳问题，那我们说这东西我怎么处理呀，高度塌陷了，那因为为什么高度塌陷了，因为一开始我们负元素的高度是被子元素撑开的吧，那我干脆这样。哎，我给负元素，我给负元素干嘛呀，设置一个高度你哎你就干嘛呀，你别被子元素分开了，我给你固定好了行不行啊，哎，我这一保存走，你这塌不塌了，哎就不塌了，你子元素再怎么复元素是不是也不塌了呀？写死了行不行，行，但是有没有问题，我写死了，我本来我这个负元素是自动跟着子元素高度的改变而改变的吧，但是现在我写死了，当我子元素高度变了，变成多少呢？变成200了，保存。

我一刷新走，你是不是就一出来呀，我希望什么呀，我希望你不止不塌陷，你的高度还可以自动去射，射适应谁呀，是不是适应子元素啊，哎，适应子元素，所以这里边干嘛呢？我们先说一下这个问题啊，说一下这个问题我们可以干嘛呢？我们可以将我们这个负元素的这个高度写死。诶写死以什么呢？诶以呃以避免什么呀，避免塌陷的这个问题出现，但是什么呢？哎，但是一旦高度写死。

负元素的高度将不能干嘛呀，哎，不能自动适应什么呀，哎，适应子元素的一个高度，也就是说我们希望的什么呀，我们希望的是什么呀，负元素可以自动适应子元素高度，也就是说子元素多高是不是负元素多高啊，所以什么呢？所以这一种这种方案我们是什么呀，是不推荐使用的，也就是说我们不建议将什么呀，将这个复元素的高度给它写死了，但是可以啊，但是不建议这么用，因为这么用以后，我们高度就干嘛了，就固定了负元素将不能和子元素一块去改变了，诶那我们想想，那这个问题我们要怎么解决呢？诶我们先停一下。