02.尚硅谷_css2.1_浮动.wmv原创

OK啊，来我们来看一下，刚刚我们讲了一些基基础的概念，是不是啊，这些概念的话，大家今天晚上要总结总结啊，今天晚上啊，今天晚上你们应该会有时间总结吧。啊，上完课之后稍微去总结一下，因为明天我们会把这些概念用的比较溜啊，呃，来我们刚刚讲的定位是不是啊，来说一下另外一个东西浮动啊，说浮动两个点我不会帮你们去复习里面比较细的一些基础点啊，这些技术点你们之前应该会啊，我们来说一下浮动会不会提升成绩啊。会不会提升几级？一级吗？你提升一级的话，不跟那个定位一样吗？浮动只会提升半级，我们说浮动一开始出来的时候，它是大家知道我们整个C2里面就CSS2.0跟CSS2.1里面能做布局的几样东西。那就是可以做布局的，能有几样东西啊。就你们现在画，你们应该画了一个PO360吧，就是你们现在画了一个简单的静态页，就你觉得你在做布局的时候，你用到C里面最最多的几样东西是什么？

核模型肯定有，核模型肯定用来做布局的吧，因为这个一个盒一个盒子位位置放哪，怎么放，是不是跟这个核模型是有关系的，其次浮动肯定有。这其实定位肯定有，是不是CL里面只提供了这三样东西啊？可是这三样东西提供出来是用来给我们做布局的吗？并不是，定位是用来帮我们干嘛提升层级的是不是？核模型是不是用，用来源于什么盒子是渲染的浮动呢？一开始的设计是不是要文字环绕图片是不是啊？我们可以来看一下嘛，我们说什么浮动？好，我直接在这边再贴一本好，CTRLCCTRL105浮动。好，来看一下浮动，这样的话我拿张拿张照片过来啊，这照片比较暴力啊，你们注意点眼睛。

好，CTRLC啊。很JO。啊，还没见过他是不是啊，我先让你们认识认识他啊，之后之后就是他了啊，OK啊，他唯一一个特点就是有钱啊，OK，走。好呃，好，我们来看来一个浮动，比如说怎么怎么来呢，嗯，怎么玩，想想我让这个外吧，好，我让这个外婆干嘛。嗯，直接来到image吧，好好直接来到image s RC呢，Image底下的。小飞张啊，他叫张小飞啊，写的英文名字叫小飞张，好走，呃，来看一下我们给个什么东西呢？这个外号是不是就可以不要了？是不是就一个什么一卖对吧，那上来是不是就就一张图片啊，那一开始服装是用来干嘛，比如说哎，我来个小徽章，小徽章小徽章是不是好。

这个英文名字怎么样？我感觉小飞张不咋地啊，是不是好走CTRLC来，来个几分，打一个比。好，这你。嗯，干掉。写错了CTRLB，呃，直接贴一个嘛，CTRLC啊，干掉CTRLB。好，来看文字有没有换绕图片，目前情况下文字是不是没有还绕图片，为什么最后一个上去了？In love look吗？Image是不是相当于是个是吧，那他们俩在一行是干嘛很正常，是不是因为我打了比R标签嘛，后面那我是不是这边应该要也要也要打个比R是不是，那这个时候是不是干嘛不在一行，好问题是我们说干嘛，我们如果当这个一麦是干嘛。来个掉，直接让他干。马弗洛特威。看文字会不会环绕图片？

有没有环绕图片？是不是文字就开始环绕图片了？这是浮动一开始干嘛，一开始做出来，它一个目的就是为了让文字环绕图片，知不道？可是浮动能不能提升成绩呢？来看CTRLB。零六。浮动好，一个元素分两层，这个概念只需要在浮动的时候考虑，其他的时候你不要给我管元，元素分几层元素就是个元素懂不懂，可是在考虑浮动的时候，一旦有元素浮动了，你得知道这个时候你要考虑了，一个元素分两层好什么意思，我们可以来看。好，比如说我有两个div，一个div叫什么？阿塔再来一个，一个叫什么到好，给两个钥匙，好up up这个干嘛呢？好，里面我写点东西，叫CTRLC来up up up，好底下这个叫什么？

等等等，是不是好走NY我怎么办？如果我要up，我让这个元素浮动起来。FL，它我让它往左浮，如果浮动不会提升层级的话，他们俩视频干嘛排在一块的啊，比如说我给所有的div来个尺寸，所有的div我来一个YY200X来一个也为200PX，大家来看这个时候我是不是让up给什么浮动起来了，呃，没有颜色吧。Up的颜色，Background，世界上最美的颜色，走，你再来一个到好，大家好，世界上第二美的好，走，你看现在他们是合到一块去了，好，如果没有浮动。你会计元素独占一行吗？是不是问题是一旦你让上面这个浮动了，下面这个是不是就进去了，有没有提升成绩啊，有提升成绩吧，是不是下面这个整个进去了，可是你发现它的文字被卡在外面了。

能不能理解啊，好，这是这个是什么意思呢？大家可以来看好呃，现在我这边有四张纸是不是啊，好一个元素其实分上下两层。上面这层是文字，下面这层跟核模型相关的东西等等，一个元素分两层，好问你，你这个元素是在在上面这么摆搭好，我下面这个元素是不是也分两层啊，好，最好给本子，给我这个本子。给个四本本子给我。对。OK，好，大家看好，这是我上面的元素是不是，这是我下面的元素，都分两层吧，好分两层，哎，本来他们俩是摆的好好的，上面的跟上面的卡的，下面的跟下面卡的，一旦我说我让上面这个浮动，上面这个元素是不是就要就要浮起来啊，而且告诉你它只浮动半层。

什么意思啊，它是不是只只浮动半层，那我底下是不是有半层在它的后面，还有上半身是不是正好在这边，干嘛卡着吧，那么你下半身要不要上去。那其实最终一个效果是是是什么样的，最终其实什么，我们是不是总共有两个元素啊，其实一旦你看上面这个浮动完之后，上面是不是就有三有三层了，另外一层是不是卡在下面，卡在下面的是不是我下面这个下面的上一层。能不能理解啊？那这时候就是我们看到的笑话。那么浮动提不提升成绩啊？提升浮动提升半成。一个元素分。两层，上层是文字相关的东西，下层是和模型相关的东西，懂不懂，好OK，好好，那这个东西知道之后，好我们可以来说了，好，好我们也知道了，浮动跟定位上的一些细节，好，这是我们讲的浮动的一些东西。