58.尚硅谷_HTML&CSS基础_浮动一.avi原创

接下来我们来说下一个知识点，一零我们叫一个什么呢？叫做一个浮动啊，叫做一个浮动来说浮动之前呢，我们先写这么一个东西，来一个这么一个div，来一个什么呀，Class来一个这个BOX1多写几个BOX1BOX2 box3，三个小盒子，然后写一个style，来个样式。第二一个BOX1给他来一个white来一什么呢？来一个诶一两百个像素，然后呢，Hat也来一个200个像素，Background color background color，我们来一个这个red，然后我这复制几个走走，这是我们这个BOX2，这是我们这个BOX3，颜色换一个，这是来一个这个blue，这来一个这个。对，中间这个来一个这个yellow吧，黄色，现在我们说有BOXSS1233个div，三个div的宽高都是什么呀，200个像素，只不过颜色不一样，一个红色，一个黄色，还有一个什么呀，绿色，那么说这个写完了以后，我页面应该是一个什么效果，哎，我这一刷新，诶不是它啊，CTRL运行诶是不是竖着排了三个大方块啊，这是我们BOX1BOX2BOX啊三诶那我么说这是为什么呀？哎，括号元素在文档额里是不是默认垂直排列呀？哎，所以我创建这个三个块都是在文档内，所以看到123是不是三个竖值排过来了，哎竖着排过来了啊所以注意我们说什么呢？块元素再强调一遍，哎，块元素在我们这个文档流中干嘛呢？诶它默认就是什么呀，垂直，诶垂直排列，诶垂直排列，所以什么呢？所以这三个div什么呀，诶自上。

支架，哎，依次排开。诶依次排开，所以最上边是我们这个BOX1，然后中间是我们这个BOX2，然后是我们这个BOX3，诶那我们说了，那我们之前说了，我们用我们我们这个页面里边这个div是个块元素，这div我主要用来干嘛呀。

是不是对我这个页面进行布局啊，诶进行布局，但是这出来一个问题，那我们说了块元素在什么呀？在文档流里是不是只能是垂直排列啊，那就带来一个问题，我这电位你无论怎么布局，我能不能写出两列来。我能不能写出这样两个div位来，不能啊，为什么呀，在文档流里，它是不是一直都是垂直排列的呀？哎，但是我们上网的时候，我们说那你这个网页的布局我有可能干嘛呀，诶我横着一栏，我下边可能什么呀，一下子我放什么呀，我放四五栏，甚至放放七八栏，是不是放很多栏啊，诶放这么多呢，但是你这么用div布局的话，你再摆你也就是什么呀，你是不是也就竖着一栏啊，哎，一栏，那所以如果说只能竖着排列的话，我们这布局还行不行不行了，那现在我希望什么呢？现在一跟这儿呢，我希望干嘛呀，我让二干嘛呀。

上这儿来，我让三干嘛呢？来这儿，换句话说，我是不是希望这三个div横着排啊，哎，横着排，哎，那我怎么让它横着排，诶有一种方式啊，有一种方式我们刚才说了有一个什么呀，Display还记得吗？诶，Display有一个什么呀，叫做一个in linelo，你说可以使我把这个元素变成一个行内矿元素吧，那你变成行内矿元素了，是不是就横过来了，哎，就横过来了，我们来看看效果啊，保存一刷新走，你是不是确实横过来了，诶但是有个小问题发现什么了，中间是不是有一二啊，我也没有设置外边距这负二是哪来的呢？诶，那我们注意了，我们这叫什么呀，叫做行内块元素，行内块元素，行内元素你就可以理解成什么呀，理解成一个大的文字，那我们来看，那就把它当成一段字，那你发现两边干嘛呀，它之间有什么是有空格啊，那我们说了空格，如果你是文字的话，这。

空格是不是默认给你显示了，所以它那个空白是由于什么呀，由于两个标签中间有一段什么呀，空白，如果你不想要干嘛呢？你把这个中间的空白给它去掉保存再刷新走，你是不是贴一块了，你看这怎么还有后边是不是没去掉啊，哎，没去掉来我给他去了，我一保存一刷新走，你是不是就过来了，哎挺好，但是这玩意儿他有问题对吧，那你想我现在就带来一个问题，我这div我只能干嘛了，我只能横着写了吧，哎，老让老老让你这么写，你得干嘛，你得封是吧？诶很麻烦啊，很麻烦，所以用这个横着一块呢可以，但是稍微的有点麻烦，那我们想想有没有什么简单的办方式，有什么简单方式，那注意了，我们来看块元素在文档流中默认垂直干嘛呀，垂直排列，它只有在什么呀，在文档流里才垂直排列，那我一想我想干嘛呀，我想让它水平排列，我可以干嘛。

啊，我是不是让他脱离文档流啊，哎，脱离文档流你就说白了，我让干啥，我让他从这个文档流里飘飘忽忽飘飘飘忽给他妈是不飘出来呀，哎，那飘出来以后他还受不受这个文档里的约束了，不受了吧，哎，不受了，所以这里边我们来说干嘛呢？那我们说如果希望我们这个块元素在我们这个液面中干嘛呢？水平排列可以什么呢？哎，可以使我们这个块元素干嘛呀？哎，脱离哎文档流啊，脱离文档流好，那现在问题来了，我们怎么脱离导流啊，那这里边我们说了叫什么呀，我说让它飘出来呀，那怎么飘啊，我们可以使用什么呀？使用我们这个哎，Float来干嘛呢？诶来使我们这个元素浮动，哎，从而干嘛呢？从而脱离什么呀？哎，稳档流啊，从而脱铃挡流，那float什么意思呀？

浮动，哎，或者形态一点叫什么呀，气球的意思，那气球什么特点呀，哎，是不是会一直往上飘啊，哎，一直往上飘，换句话说我可以嘛呀，我给这个元素设置这个float以后，这个元素干嘛了，就会变得像一个气球一样，从我们这个门档楼里干嘛呀，飘出来，那我们想它这儿一飘出来，是不是想着能往哪飘，是不就能往哪飘了，哎，就能往哪飘了啊好，那我们来看这个float的属性，我们怎么来用啊，Float的属性怎么来用，直接来看一下我们这个文档，回头我们搜一下f floatat float在这，Float叫什么呢？规定我们这个框是否应该浮动啊，是否应该浮动，点开它，我们来看它的样式默认值是什么呀，那那说白了就什么呀，不浮动，不浮动指的是我们这个元素就在什么呀，文档楼里继承性是什么呀？No，诶不会继承，你要继承了，我的页面里是不是全都变成汽油了，诶全都飘起来啊，所以这个继承性是no，然后我们来看它几个可选值。

其实主要用的就是三个，一个是left，还有一个叫什么呀，Right，还有叫什么呀，那啊那直接来说一下叫什么呢？我们来说一下它的这几个可选值，第一个值我们叫一个，那那叫什么呀？叫默认，默认值元素什么呀？诶默认在我们这个文档流中干嘛呀？哎排列说白了就是什么呀，没起来没浮动啊叫一个捺，然后有一个什么呢？有一个叫做left啊left叫什么呀，叫做元素会什么呀，会立即脱离文档流干嘛呢？诶向我们这个页面的什么呀？诶左侧浮动啊，向我们这个页面的一个左侧浮动啊，那既然又浮动了，是不是肯定是往上走啊，哎往上往左这么浮动啊，向左侧浮动，然后呢，再来看还有一个什么呢？还有一个right right right叫什么呀？诶，元素也是会立即脱离文档流，然后干嘛呢？哎，像我们这个页面的一个什么。

啊，右侧浮动啊，像我们这个页面的右侧浮动，来我们来看看效果，直接来一个float来什么呢？诶float来一个，那这是给谁设置的，给BOX1设置的，还是那句话，我设置那也没有用啊，没用啊没用，因为默认值就是它，所以我设置完了是不是还是这个效果呀？诶还是垂直排列，那好，那现在来干嘛呢？我给它改一个，改一个什么呢？改一个right，诶改一个right什么效果是不是向右侧浮动啊，诶那我们来说哪，我1BOX1是不是跟跟这儿呢呀，右侧跟哪啊。是这儿啊，诶向右侧浮动就是指什么呀？往右侧走啊，往右侧走来，我们来看效果，直接一刷新来走，你说白了，首先看BOXS1是不跑到我页面的这个右边来了，诶你发现一个什么特点，不仅BOXS1过来了干嘛了？BOX2BOX3是不是往上拱上来了，诶那这是为什么呀？诶我们说开始他们是一个垂直排列的吧，然后我给我们这个BOX1设置一个浮动，它干嘛了，它是不是飘起来脱离了文档流了，那好，那它脱离文档流，它原来在文档轮里边站那个位置还在站，不占了，不占了，他已经脱离出来了，而我下边元素干嘛了，你看你不占地儿了，我干嘛呀，我是不是上来了，诶所以干嘛呢？报C1浮动，我BOX2爆三干嘛呢？就往上去拱了啊，就往上拱了，所以注意我们设置浮动以后，会使我们这个元素干嘛呀，完全脱离。

文档流啊，完全脱离文档流，所以这里边我们来说当为一个元素干嘛呢？设置浮动以后，那怎么叫给它设置浮动啊，Float属性是一个非nu的值，只要你的float不是钠，就是什么呀，你就开启了什么呀，浮动啊当一个元素设置浮动以后，元素会什么呀？会立即完全脱离什么呀，文档流啊会立即其实完不完全的恶位脱离就是肯定脱离了，没有什么完不完全的是吧？哎就什么呀，会立即脱离文档流，那么说元素脱离文档流以后什么呢？诶它下边的这个元素会什么呀？诶会立即什么呀？诶立即向上移动，诶向上移动干嘛呀，是不是把他之前这个位置给它干了呀？哎，会向上移动，所以这里边注意当我们这个box。

一设置浮动以后BOS2还有三个嘛嘞，往上拱了啊往上拱了诶那好了，那脱了量轮以后还干嘛了呢？那么说元素浮动以后，诶会什么呢？会尽量尽量干嘛呢？诶尽量向我们这个页面的什么呀。诶左上或什么呢？或者是右上干嘛呢？诶漂浮啊，会尽量向我们这个左上或右上漂浮，那问题来了，什么时候往左上飘，什么时候往右上漂，哎，如果直是left的是不是就往左上飘啊，所以你来看着我这值float，我来一个left，刚才是right吧，Right是不是飘右边来了，诶我来1LEFT1刷新走，你完了是不是改左边了呀？哎，改左边了啊，所以注意他会尽力往左上或者往右上飘，如果是左就是left，就是左上，如果right这是什么呀，右上，但是你发现我改成左以后谁没了黄的是不是没了呀？他怎么没了呀，他是不是没了，哎，他被什么呀，他被盖住了，来我们这黄的呀，大一点来一个什么呢？250。

宽和高都是250，我这一刷新走，你黄的跟哪呢？是不是跟这的呀？哎黄的跑我们这个红的吓死了，这是为什么呀，还是回复到的一个状态，开始的时候是这样的，对吧？然后干嘛呀，我这个红的是不是bos一向上浮向左浮动啊，它浮起来了，它原来那个位置呢，是不是出来了，然后BOX2干嘛呀，拱上去，拱上去以后我们这个BOX2是不是把这个不是BOX1，是把BOX2给它盖住了呀，哎盖住了，所以注意我们浮动实际上干嘛呀，要比我们这文档流要是不是要高一层啊哎，所以我们这浮动元素会盖住我们这个文档流里边的一个元素啊文档的元素这个能看懂吧？哎，好，那现在我们知道浮动一个特点了，它干嘛呀，你设置left是往左上浮，设置right是往右上浮，但是问题来了，这哥们是不是无线浮，它是不是无线浮啊，一看明显不是，他要无线浮，它是不是就浮出去了，一浮从我浏览器里是不就出去了，所以它。

啊，不是无限浮动的，那它会在哪儿停呢？诶，它会上左上或右上浮动，直到浮到哪呢？直到诶遇到我们什么呀，我们这个负元素的一个什么呀边框啊，直到遇到负元素的边框什么意思？那你来看我这div往上，它怎么不往上浮，这是不是还有空间呢？还有一块白呢，对吧，为什么不往上浮了，因为这就已经是我们这个body璃的一个什么呀边框了，它浮到这儿干嘛了，就上不去了，它浮不出它的什么呀，副元素啊，副元素就像就跟什么似的，那个孙悟空是不是飞不出那个如来佛祖这个。

说小心啊，哎，同样我们这个子元素也浮不出它的什么呀，负元素啊，会遇到负元素的边框就停止浮动，诶那再来看还有什么情况来，那现在干嘛呢？我给我们这个BOX2，我们先给BOXS1吧，先改回来啊改成一个right，把BOXS2显示出来，来，我这一刷新走你BOXS1是跑这来了，二是不是跟这儿来呀，来看着我给BOX2设置一个float一个什么呢？Float一个这个rap，我让BOX2干嘛，是不是也向右浮动啊？哎，来保存，我们来看效果，我这一刷新咱们先看你说我二向右浮动以后，三跑哪去了，三是不是上去了？哎，我一刷新来走你三是不是跑上面去了，为什么呀？

还是那个原因，2E脱离挡流是不是三就往上拱了呀？哎三往上拱了，但是注意了二是往右浮起来呀，诶那我们说了，当你设置浮动以后，元素会干嘛呀，尽量的往左上或者是不是右上浮啊，那注意了，我右最最右最上是不是这块地儿啊，那问你了，BO42为什么不往这儿浮，为什么到这就停了呀？诶这是不是已经有一个站着了，哎，有一个站着了，所以这里边注意它不仅仅是遇到负元素的边块会停止，如果什么呢？诶直到遇到负元素的边块或者什么呢？其他的浮动元素啊，直到遇到负元素的边块或者什么呀，其他浮元素，那什么意思呀，我们BOX1是不是先浮动的呀，它干嘛呀，他把这块地儿已经给它占了，你BOX2往上浮，你浮吧，使劲浮最多你干嘛呀，最右边你也就到这儿了，因为这块位置是不是已经被它占了，哎，所以注意啊，浮动是有限制的，往上往左上或者往右上浮，但是。

什么呀，它不会去超过它的负元素或者干嘛呀，或者去超过其他的什么呀，浮动元素啊，浮动元素，所以注意浮动是有这个限制的，诶那现在我想干嘛呢？我想让这哥们也过去怎么办呀，怎么办呀，我是不是给他也来一个float一个什么呀，Right呀，哎，Float一个right啊我这一刷新走，你是不是也过去了，哎过去了，那我想让它都靠左边怎么办呀？哎，我是不是都写这个left呀？哎，那我们会发现通过这个浮动我们是不是就可以完成这个将我们这个块元素给它横过来了，哎，给它横过来了啊，这就是我们的浮动的一个基本这么一个特点，诶那接下来我们再看啊，还有什么特点啊，还有什么特点，嗯，来，我现在干嘛呢？我把浮动这块啊，我都给它住了。

都给他住了。注完以后保存，现在一刷新是不是又都竖过来了，我来干嘛呢？我让这个黄色块干嘛呢？向右浮动啊，向右浮动诶BOX2我们这个黄色块干嘛呢？Float一个right保存向右浮动诶那我们来说这哥们向右浮动，我们说了一设置浮动就向左上或右上对吧？那向右浮动是不是向右上啊，那这哥们能去哪啊。他会不会去这儿呢？会不会去这儿呢？这是不是最忧伤的呀？哎，没有比这来忧上的了，会不会去这呢？来，我们这一刷新来，走你。干嘛了，他是不是还是在这儿啊，有没有上去，没有上去，为什么没有上去，哎，我们这个div是一个什么呀，是不是一个块元素啊，注意了，我们如果浮动元素上边是一个块元素，这个块元素就相当于是一个什么呀，就相当于是一堵墙，浮动元素上不去，上不去啊，上不去到这儿就干嘛了，被它挡住了啊把它挡住了，所以这里边又是一个特点什么呢？我们说如果浮动元素上边是一个没有浮动的什么呀，块元素则什么呢？则浮动元素不会干嘛呢？不会超过什么呀，块元素啊，不会超过块元素，一定要注意啊，这个特点它不会超过上边的快尔速，那你说我就想把这黄的放上边怎么办怎么办？那我们说他们关键是什么呀？BOX1是不是在BOX2的上面。

我可以让Bo干嘛呀，是不是也浮动啊，哎，也浮动或者干嘛呢，调个位置，我把BO42挪到什么呀，上边去，这回一保存是不是就行了呀？哎，你可以通过这个结构上去改变啊，通过结构上去改变这个快捷键啊，按着CTRL，然后方向键上下可以调整这代码，往下一挪，挪下边再往上挪，挪上边了啊可以调整代码的顺序，好，这也是我们说的一个浮动，然后我们来看看还有什么特点啊，还有什么特点来，我把这个什么呢？我把这个float还是啊给它住了，住了以后呢，我来做这么一个事儿，一刷新呢，我来干嘛呢，我来让BOX1啊向左浮动，BOX2呢。

呃，报个字也像什么呀，诶也向左left，然后呢，我们这来一个什么呢？这来一个float box个三，我也向左吧，现在都向左这三个嘛了，是不是排一块了，哎排一块了，那么如果来一个爆三个嘛呢，Float的一个right，那什么效果是不是跟左跟右边啊，哎，所以一二在左边，而三在右边，那接下来我们要看一个什么事啊，现在我们这个元素是不是都是200个像素，换句话说它比较比较窄是吧，诶比较窄来我这样，我把这个什么呢？我把这个BOXS1啊调宽一点，来多少呢？来一个600，它是不是宽了呀，宽了我们来一刷新走，你宽了，虽然宽了，但是这一行是不是还足以容下我这三个元素，哎，来看着啊，我来干嘛呢？

哎，咱们先让它宽一点，我现在让它变窄，变窄变窄到什么程度以后呢，窄到这一行已经容不下我们这个三个元素了，它会怎么办？完了是不是会自动的去换行啊，哎，自动的去换行啊，所以注意，如果我们这个一行里不能足以不能容下所有的元素，所有的浮动元素，则其他的浮动元素换嘛，会自动去换行啊，会自动换行啊好，这一块是这么一个问题，然后我们再看一个问题，还有什么问题呢？诶接下来啊，我让BOX2也干嘛呢，也宽一点，BOX2是不是也600了，来保存我这一刷新是不是这个效果呀，来，我把这东西拖宽一点，宽一点，宽一点，诶这是一，这是二，这是三，一向左幅，二向左幅，三向右幅，那问题来了，三向右幅，我问你了，这是不是我整个页面的最右上面，最右上是不是。

是不是这块啊，那你会发现三跟这好像就有一堵墙一样，是不是又上不去了，诶那这是为什么呀？难道一是快元素吗？但是一是不是浮动了呀，二是不是也浮动了呀，跟跨元素应该没有关系了，那这三它为什么上不去啊，为什么上不去啊？诶那注意了这个什么呢？你可以理解成我们这个csi元的元素比较讲究，我们叫讲究呢，我们说浮动的元素不会超过它的什么呀，它的这个兄弟元素啊，不会超过它的兄元素最多最多，哎叫什么呀，一边骑啊，不会超过它，严格来讲啊，上边的兄弟元素啊，不会超过它上边兄弟元素最多最多一边骑什么意思？我们来看这是BOX2，这是box啊三从结构上来看，我BOX2是不是在BOX3的上面啊？哎，你来看我BOX3在哪呢？BOX2是在这呢？

BO3在这儿呢，BOS2在BO3的一个上边，所以注意BOB3你再怎么扶他也不会超过什么呀，他的兄弟，他的兄弟是谁呀，二号，那我们来看正好是不是这有一个边界呀，诶他超没超过去不会超过去，他最多最多和他什么呀，一边级不会去超过什么呀，这条线啊，不会超过这条线的，这都是它的一些什么呀，特点啊，一些特点，那我们说怎么超过呀，还是二跟三掉一个易保存是不是就行了呀啊就行了啊，所以注意浮动元素不会超过它这个兄弟元素啊兄弟元好那呢这个呢是我们说浮动元素的一个特点，咱们简单总结一下，我们通过float来开启浮动，只要值不是档就开启什么呀，浮动可以设置一个left或者什么呀，Right开启浮动以后，元素会完全脱离什么呀，文档流，也就是说它不在文档流干嘛呀，再占用位置，它下边的元素会自动拱上来啊，会动自动拱上来，我们设置live以后，它会向什么呀，向左上浮。

浮动设置right以后像什么呀，像右上浮动，但是它不会超过它的什么呀，负元素的边块啊，不会超过它这个负元素边框也干嘛呢，也不会去超过其他的什么呀，浮动元素换句话说，它遇到负元素或者遇到其他浮动元素，它会什么呀？停止啊，它会停止啊，那然后呢，我们还说了它不会什么呀，如果上边是一个什么呀。哎，没有浮动的一个什么呀，块元素则什么呢？浮动元素不会超过块元素啊，不会超过块元素，诶如果什么呢，浮动元素还是不会超过它上边什么呀，兄弟元素最多最多什么呀，一边提啊一边提不会超过它啊好，这也是我们说浮动的一些特点啊，一些特点我们来保存一下先呢停一下。