尚硅谷前端基础 (60)

好，讲完了我们的这个核模型，那接下来现到我们下一个大的块啊，我们还是新建一个文件夹，新建一个文件夹，我们叫做一个零四，我们要说一下我们这个浮动f at啊float，那其实浮动的话，其实按道理来讲，我也应该算到布局里边啊，当然我们单独给他提一下，布局里边我们就只说了一个盒子模型啊，然后这个浮动里面呢，我们就先新建一个文件，我们来写一个叫做一个呃，浮动的一个这个简介啊，我们先介绍一下我们这个啊浮动啊，先介绍一下我们的动，那这里边呢，我们说浮动啊，我们先写一个页面啊，写一个页面，写一个最基本的一个结构，然后给它运行出来，还是啊，我们那个老一套点一个BOX1 box1呢，我给它来一个外啊，来一个点一个这个style标签，然后这我们来一个点一个BOX1BOX1的，我们来一个200HAT来一个200啊，然后background color background color，我们来一个这个井号B写这么一个啊，那现。

那我们就创建这么一个BOX1啊，创建了一个这个div 200乘以200这么一个盒子，那什么叫做浮动呢？哎浮动简单来讲，那我们通过浮动的话，我就可以让这个元素干嘛呢？哎，可以让它元素啊向左或者向右移动，哎我们先说简单的啊，我们说通过什么呢？哎通过我们这个浮动，哎浮动可以使哎一个元素，哎向什么呢？向其负元素的一个左侧或什么呢？或右侧移动啊可以向它的负元素的左侧或者是右侧移动，那我们来说一下怎么设置浮动，我们通过什么呢？哎，我们使用我们这个哎，Float这个属性，哎来设置我们元素的一个浮动，哎元素一个浮动，Float什么意思呢？Float就是浮动的意思啊浮动或者呢，还有一个更直观的叫做气球啊，叫做气球，所以你也可以这么想象，当我。

克制完这个float以后呢，我们就可以把这个元素想象成气球啊，它可以向它负元素的左飘，左侧飘或者是右侧飘，注意它只是在它负元素的范围内飘，它不会飘出它的负元素，所以这个时候我们来看一下我们float的一个默认值，我们直接写一个float的默认值叫做一个，这个叫做一个none none什么意思呢？哎，None就是不浮动啊，就是不浮动，所以我们来说一下它的一个可选值啊，可选值第一个我们叫做一个这个，那哎，那叫什么呢？叫默认值，元素什么呢？哎，元素不浮动啊，还有什么呢？还有left是我们的元素向左浮动啊，向左浮动还有什么呢？还有叫做right，叫做一个元素向右浮动，所以现在你设转纳没有任何区别啊，我们改一个你设置life的，其实也没有任何区别，因为什么呢？因为现在我的这个元素是不是本身就靠右啊，哎，本就。

靠左，所以你设置看不出区别来，所以我可以改一个什么呢？改一个这个right啊，改一个right，这个时候你看元素是跑右边去了，哎，你写left元素就跑左边去了，所以这个浮动很简单，就是控制我们元素向左或者是向右移动，Left就向左浮啊，Right就是向右扶，就这么简单啊，就这么简单，然后你还要注意一个问题啊，刚才我们说float left没有区别在这儿，只是看上去没有区别，但是实质上会产生很大的变化，我们来看一下这效果啊，现在我选中这个元素，我说了，当我这设置宽度以后，我们说我们这个子元素，大家它的这个盒子模型，它的那七个属性，还记得那七个属性吗？Margin left，诶，Border left pading left加上我们的wise，再加上我们的pading right，再加上border right，再加上我们的marging right，这几个值加一起。

是不是得等于它负元素内容区的宽度啊，哎，而现在我只给BOX1指定了一个200像素，所以在我们这个图里，BOX1这多了一个这个，诶右外边距为什么多了右外边距就是为了让这些值加一起以后是满足负元素内容区的一个宽度啊，诶，所以它会多一个右外边距，但是你看着啊，当我们设置完这个float left以后，我们来看效果，这时候看效果，你看这外边距还有没有了，刚才我没设置的时候，它这是不是还有一个粉色这么一个橙色这么一个边，对吧？当我设置完浮动以后，还有没有了。就没有了啊，就没有了，所以注意啊，注意注意点什么呢？注意哎注意我们这个元素设置我们这个浮动以后啊，什么叫设置浮动，只要你的浮的值不是钠啊，不是钠都叫设置浮动，不是钠就叫设置浮动啊元素设置浮动以后，我们这个什么呢？哎，水平布局的那个等式变什么呢？诶变不需要什么呢？哎变。

哎，不需要强制成立了啊，不需要强制成立了，所以这个时候那个等式就失效了，不是必须要满足，所以你也会看到那个玩意儿，那个外边距是不是就没了，为什么？就是因为设置了浮动啊，设置浮动诶那提到这儿我们就要想到一个问题，什么问题呢？哎，我们来写一下，直接来一个div，点一个BOX2 box2我们来整一个啊box字，整一个box字啊点一个BOX2，然后呢，在这我们给BOX2设置个样式啊，点一个BOX2 white200 hat200，然后呢，Background color background color，我们来一个这个，来一个orange啊，来一个orange or啊orange设置完了，那现在这是不是我们的一个BOX2啊，哎，我们的一个BOX2，那现在我们来看效果，现在你看啊，我们之前就提到过这个问题，一和二是两个块元素啊，是两个块元素并。

并且实际上现在一的边上它有区域，是不是可以容纳在下二啊，哎，容纳在下，但是二之所以没上去是为什么？如果简单说呢，就是因为一是块元素，那说具体原因就是因为一，虽然它的可见宽只有这么大。但是实际上它还有这么大的一个外边距，它属于不可见区域，这个区域是不是也不能被它去占领，所以二能不能上去，诶二上不去，二二上不去，二上不去，那我现在想的上去怎么办？那也就说如果这个距离没有了，那二是不是就上去了？哎，那怎么就没有了，那我们可以直接给它设置一个float left，那这样它那个等式就不必要满足，等式不必要满足，这外边距是不是就没有了，没有了那二是不是就应该上去了？诶我们来看效果啊，我直接把这个弗float left给它打开，现在我让Bo子一来浮动来看效果，完了，诶二还有没有了，哎，二不仅上去了，还直接就没有了，为什么没有了？哎，我们来看一下，我把二啊，我给它调大一点，二是不是没有了，诶注意二不是没有了，二跑哪去了？二跑到BOX1的下边了啊，二跑到BOX1的下边了，诶，那这又是怎么回事啊，这又是怎么回事？

那这里边我们来说一下，哎，我们这里边啊，注意还有一个是我们这个元素设置浮动以后，它会什么呢？会完全从我们这个文档流中脱离，还记得之前我们提到过文档流的概念吗？哎，Normal flow，文档流是我们元素，是我们网页的一个这个基础，是我们元网页的一个地基，我们所创建的元素默认情况下都是在文档轮中排列的，所以这里先注意，当我给元素设置浮动以后，无论你是float left也好，还是float right也好，元素会完全从文档流中脱离，不再什么呢？哎，不再占用我们这个什么呢？哎，不再占用我们这个文档流的一个位置，它不仅是外边距没了，而且它也不再占据我们这个文档流中的一个位置，所以元素下边的还在我们这个文档流中的这个元素。

会什么呢？会自动，哎，会自动向上移动啊，会自动向上移动，所以这个时候什么情况，这个是BOX1，这个是BOX2开始的时候啊，我们来看一下BOX1刚开始的时候，BOX1我们没有设置幅度，那现在这是一，这是二，这个位置等于是不是被BOX1全都占着呢？哎，全都占着呢，那这个时候当我给BOX1设置一个float left的，BOX1就会脱离文档流，脱文档流意味着这块位置BOX1还占不占了，不占了，不占了怎么办？BOX2也不跟他客气，直接往上是不是就移动了，哎，就移动了啊所以注意我们现在说了浮动两个特点，第一个我们的元素设置浮动以后，它会完全从文档流中脱离，不再占用我们这个文档流中的一个位置，然后第二个，诶，然后呢，它下边元素会自动拱上来，然后第二一个就是我们。

元素设置浮动以后，它会向左或者向右去移动啊，是这么一个特点，但是其实这也产生一个问题，那其实我们其实可能更希望什么呢？之前BOX1和BOX2是什么呢？哎，是这个垂直排列的，那垂直排列对我们来说布局就有一个局限，那既然是垂直排列，就意着意味着我们所做的网页你再复杂，再复杂它也只是什么呢？也只是一个纵向的排列，我能不能横着排列啊，不能横着排列，那现在其实我们更希望的一个场景就是可以让我们这个两个元素或者是多个元素变成一个什么呢？变成一个水平的排列，那怎么办？哎，那我让BOX1浮动，让他脱离挡流，那这时候会出现一个情况，他不再占据位置，那这个时候BOX2是不是就。

就上去了，哎，就上去了，那这里边注意了，我现在想他俩并排，那怎么办呢？哎，非常简单，我可以让BOX2干嘛呢，也浮动，BOX2也浮动以后，那这个时候它的效果你看是什么了，BOX1在这儿，BOX2是不是是不是在这儿啊，哎，那我这如果还有一个BOX3。BOX3，我们来一个BOX3。哎，我让这个Bo荷三呢也浮动，然后呢，我给BO3呀，换一个颜色，换一个yellow，那这时候你看什么效果，诶什么效果，那现在啊，我这应该叫做BOX3什么效果，诶你看这是一，这是二，这是三，那现在是不是就让这个1233的元素就并排排列了，哎并排排列了，它现在就是这样一个效果啊，这样一个效果，那这里边它是怎么回事儿，它是怎么横过来的啊，它是怎么横过来的，但这里边我们就要总结一下我们这个浮动特点啊，总之啊，现在你先记住了啊，你先记住了，我们浮动的效果就是可以让我们的元素并排排列，横向排列啊，不需要去垂直排列，可以直接横向排列，那我们现在要解释的是它为什么可以横向排列啊，为什么横向横向排列，所以在这儿我们来说一下，我们来总结一下我们这个浮动的一个特点，浮动的一个特点，第一个，第一个。

我们叫做一个什么呢？浮动元素会完全什么呢？诶会完全脱离我们这个文档流干嘛呢？诶它不再占据我们这个文档流中的一个什么呢？文档流中的这个位置啊，文档中的位置这个一个特点啊，我先把这个，哎这个三给去掉啊，三给去掉，我把三给注掉，我们还是留一个二，我现在不让二浮动，那这个时候你会发现我们的一会把二给盖住，为什么？就是因为一脱离了文档流，而二上去了，那所以一等于比二的层次要高了，它脱离，它像气球一样，它浮起来了，它层次高了，层次高了二一上去是不是一就把二给盖住了，所以第一个浮动元素会完全脱离文档流，不再占据文档流中的一个位置啊，然后第二一个我们这个什么呢？哎，我们这个设置我们这个浮动以后，我们元素会什么呢？元素会向我们这个负元素的一个左侧或什么呢？或右侧。

移动啊，会向左侧或右侧移动，你设置right就向左移，你设置right就像什么呢？就像右移，对吧，你看right是不是就就跑这儿来了，哎，左移或者是右移，Left往左移，哎，Right就往往右移，但是这里边注意了，我们来看一下我们设置left的是往左移了，那为什么你看啊左移左移，那这里边注意我们说元素，哎移动时啊，元素移动时啊，我们来说一下移动时的一个特点，移动有哪个特点，嗯，这么写吧，啊这么写我们直接写第三条，第三条什么特点呢？哎，我们这个浮动元素它不会什么呢？诶不会，诶默认啊默认它不会移动什么呢？不会从这个负元素中移出啊，不会从负元素中移出，什么意思，我们说了浮动元素它会向元素的负元素的左侧或者是右。

左侧移动，那这个时候注意它是有一个边界的，它的边界是哪边界就是负元素的最左边，或者是负元素的最右边，要么移动到最左边，要么就移动到最右边，你除非设置别的一些特殊属性，不然默认情况下它会不会移出去，不会，所以负元素的边界对于浮动元素来说，就像一朵墙一样，是它永远没有办法逾越的啊，永远办没有，没有办法逾越的。好，那现在再看我们的BOX2 box2现在呢，BOX1已经设置浮动了，那BOX2是不是现在是在BOX1的边啊，我还是把它的宽度弄大一点，我们来看一下BOX2 box2在BOX1的里边对吧？那这个时候BOX2还在文档轴里，而BOX1是不在文档轴里了啊，那接下来呢，我给BOX2我也设置一个float left，那这个时候注意BOX2是不是也也浮动了，BOX2也设置浮动，那BOX2也拖。

玻离文档流，那这个时候意味着BOX2是不是应该也向左浮动或者是向右浮动啊？哎，那我问你了，我给BOX2设置了一个float left box有没有移动到最左边，有没有移动到最左边。没有移动到左边，为什么呀？这左边不有地吗？不是向负元素左侧移动，复元素边块跟这儿呢，为什么BOX2没有移动到这儿了呀，为什么？因为BOX1是不是在他头里呢？这个位置已经给BOX1给占了，所以BOX2能不能过来过不去，所以对于BOX2来说最左边，最左边就是BOX1的什么呀，右边是不是就是这个位置，对于BOX2来说就是一个最左边啊哎，所以注意我们来说一下我们的浮动元素，哎浮动元素它不会什么呢？哎，不会盖住什么呢？哎，盖住其他的这个浮动元素而什么呢？哎，而是哎自动在什么呢？再哎呃，我们想一下这句话我怎么给描述的原严谨一点啊，严谨一点，哎浮动元素这么写吧，向左或向右移动时啊，不会什么呢？哎，不。

会超过它什么呢？它前边的其他的哎，浮动元素啊，不会超过它前面的其他浮动元素，比如说我BOX1 box1干嘛也向左浮，BOX2也向左浮，那现在我是BOX1先浮过来的，BOX2后浮过来的，那么这个时候BOX2对于BOX2来说，最左边就是这个位置，它没有办法再往左了，因为再往左那就已经盖住BOX1了，所以它只能贴到BOX1的后边，诶你说说老师，你想让我想让BOX2跑前面去行不行？行，那这个时候你就得调整BOX1和BOX2位置，现在时BOX1在BOX2前面啊，那你调整一下，把BOX2放到BOX1的这个前面。是不是过来了啊，就过了啊，所以这个位置我们说的是什么？我们说的是我们结构上的位置，说的是H天猫的位置，它不会超过前面其他的浮动元素，所以BOX2这个时候它是不会超过BOX1的啊，是不会超过BOX1的啊，一定注意好，那所以这个时候我们把BOX43给它打开，你会发现包括三我能不能看见报，括三我看不见报，括三跟哪儿了？你想一下，包括三跟哪了？这是一，这是二，三本来应该跟哪三本来的位置是不是应该在这个位置，但是它前面应该有两个元素，一个是一，一个是二，但是这个时候一还有二是不是都浮动了，都浮动了意味着这两个元素是不是都脱离文档流了，都脱离文档流，那BOX3是不是毫无疑问就就拱上去了，所以BOX3跟哪了？BOXX3现在在BOX1的下边，它被。

盖住了，我们一选，你看Bo括三是不是跟这儿了，它已经被盖住了啊，他已经被盖住了，那同理，那现在我要想让B括三排到这儿来，那怎么办？诶一样我直接给BOX3设置一个float的left，让他也向左浮动，那它向左浮动，它前面有一个BOX1，有一个BOX2，那对于BOX3来说，最左边是不是就就是这个位置了，诶就这个位置了啊，所以这样我们就达成了一个什么呢？达成了一个横向的一个布局，所以你要注意它的一个顺序是怎么做的，首先BOX1浮动浮这来了，然后BOX2浮动贴到BOX1，然后BOX3浮动贴到BOX2，如果后边还有BOX4，是不是还接着往下贴呀？哎，接着往下贴，这就是浮动特点，它可以使元素脱离文档流，然后元素干嘛呢？它会向左，尽量的向左或者尽量的向右去移动，当然前提是你不能移出副元素二一个，你不能超过你前面的元素啊。

不能超过你其他前面的元素啊，这个是我们说的一个这个浮动元素的这么一些简单的一个特点啊，简单一个特点，然后我们再看啊再看，呃，这里边呢，我把BOX1啊给它改一下，嗯，我这样吧，我这边再写一个啊，我们直接点一个这个，呃呃这么写还不行，嗯，我们把这儿我想一想啊。

我把BOX1改一下，我现在不让BOX1浮动，不让BOX1浮动，你注意了，现在注意了，我们BOX2向左移动，向左浮动，BOXX3也向左浮动，那现在注意了，诶我这块不有位置吗？它为什么不会上去呢？哎，他为什么不上去呢？诶那这就是这个问题，因为这个位置我们的BOX1是没有浮动啊，哎，没有浮动，没有浮动这个位置就还被BOX1站着啊，还被BOX1站着，所以这个位置二和三上不去，上不去，上不去，所以没有浮动的块元素，对于这些浮动元素来说，就像一堵墙一样，他们永远没有办法逾越，他们超过不了这个东西啊，超过不了这个东西，所以这个时候我们再总结一条啊，再总结一条什么呢？我们说了，如果我们这个浮动元素的这个上边，当然这句话有点像废话啊，上边是一个什么呢？是一个没有浮动的一个块元素，则什么呢？则我们这个浮动元素。

无法什么呢？哎，无法上移啊，无法上移，也就是说它本来也没法上移，浮动主要说的是我们这个水平移动啊，水平移动那上边，所以这个浮动元素它只能左右去移动，而这个元素在上边，所以下边这个两个元素它是上不去的啊，上不去的，如果你想在上去，你要么把它删了，把它删了，要么你让它也浮动啊这么一个特点，然后再看啊，我们把boss机换回来，让它接着浮动，浮动完了以后呢，我们来看一下，现在注意现在我们这个一行，你看我现在这个宽度是不是能装下这三个元素，哎，能装下这三个元素，好，那现在再看啊，当我把这个屏幕变窄的时候，一行不足以容纳所有元素的时候，你发现什么情况了？哎，你是不是发现我们这个三被挤下来了，哎，所以这个时候它的特点有点像那个，像那个文本特点，第一行如果能容纳下所有容元素，就容纳容纳不下其他元素，是不是换到我们这个第二行了，哎，换到第二行好。

那这里边看着了，我们来做一个这个手脚，我把BOX2宽度变宽一点，我变成这个400 box1呢也变成400，我让他们俩都变，变宽一点啊变宽一点，然后我让BOX3呢，哎，我让BOX3啊向右浮动啊向右浮动，那现在我们看到的一个结果是是是是是是这样的这样，哎，你看。这是BOX1，这是BOX2，这是BOX3，一二向左伏，三向右伏，这是没问题的，对吧？但是当我们第一行容纳不下他们三个的时候呢，哎，看着啊，往下截，往下截，往下截，哎，三是不是下来了，再再调啊，再调，我们来看一下再调，诶二是不是也下来了，哎，二也下来了，那这个就是我们的BOX2，这是BOX1，这是BOX3，因为现在第一行容纳不下一二了，对吧，所以二被挤下来了，当然三也能拉不下，三是不是也被挤下了，哎，但是问题来了，你看这块位置。

他是不是还有地儿呢？这块还有地儿呢，那为什么这个三它不再往上移一下，为什么要把这块给它空出来呢？为什么要空出来啊，为什么要空出来，所以这个是我们说的第六一个特点，其实跟我们的这个，呃，跟我们这个第四个有点差不多啊，有点差不多，哎浮动元素还是不会超过什么呢？超过上边的什么呢？上边的一个，哎超过它上边的一个浮动的兄弟元素啊兄弟元素它最多是什么呢？哎，最多，哎最多就是什么呢？哎就是一边起，就是和他。一样高啊，一样高，哎，那这个跟刚才那个区别啊，刚才这个我们说的是水平方向的啊，垂直方向的，而这里边我们说的是一个垂直方向的啊，垂直方向的，你看三虽然有空间，这里个位置虽然有空，但是它不会上去，为什么？因为BOX2是不是跟这呢？BOX2还在这儿，BOX2在这儿的话，因为BOX2是它的一个兄弟元素，它的BOX2的高度是不是就在这儿了啊，所以对于BOX3来说，它最高最高就到这儿，它的高度不会超过BOX2，除非你通过一些其他属性默认情况下，它是不会超过BOX2的高度的啊，这1.1定要时刻注意啊，一定要时刻注意好，那这里边注意了，我们来看一下，实际上你如果报告三不浮动的话，它的位置在哪呢？我们来看报告三。

BO3的位置是不是在这儿呢？所以如果BOX3向左浮应该在这儿，如果是向右浮是不是应该在这个位置，但是为什么浮动完了以后，它是跑这儿来了，为什么？就是因为它上边那个BOX2的高度干嘛呢？在这个位置，所以它是不能超过BOX2高度，所以他就上不去，还是那句话，你说老师我就想让他上去，就想让上去怎么办？你把二跟三交换一个位置，他就可以上去，这个时候三是变成二老二了，哎，二变成老三了，那这个时候它就可以上去啊，可以上去了，所以我们可以通过结构去改变啊，通过结构改变好，那这里边我们简单的总结了一下浮动的一个特点，稍微的有点啰嗦啊，稍微有点啰嗦，但是相对来说也比较细致了啊。首先第一点，浮动元素会完全脱离文档流啊，不再占据文档流中的位置啊，也就是说，呃，说白了，一浮动它就像气球一样，它就飘了啊，不再去跟文档流里，就是相当于什么呀，它就从地球上。

走了，离开地球了，脱离地球地球表面了，这个时候它就不再占据那个文档中的位置，那这里边它下面的元素就会自动往上，往上挤啊往上挤，然后设置浮动以后，元素会向负元素左侧或者是右侧移动，浮动元素它默认情况下不会从负元素中移出，它就是在负元素那个框框里移，不会从这个框里移出去啊。然后浮动元素向左或向右移动时，它不会超过它前面的什么呀，其他浮动元素水平方向同样垂直方向也是浮动元素不会超过它上面浮动的兄弟元素最多，最多就是和它一样高一边提啊。然后第五个，如果浮动元素的上面是一个没有浮动的块元素，则浮动元素没有办法往上移动，它只能左右移动啊，当然浮动元素本身也是只能左右移动，所以这句话就等于一句废话，其实写不写都都可以啊，写不写都可以好，这个是我们说浮动的一个基本的一个特点，还没有完全说完，还没有完全说完，那总之如果上边你理。

写的不是特别好的话啊，我们简单总结一下啊，简单总结，简单总结一下，那我们说了浮动主要作用什么呢？浮动目前来讲的这个主要作用就是什么呢？哎，它的主要作用哎就是让我们的这些什么呢？让我们页面中的这个元素可以水平排列啊，可以水平排列，那么说明呢，通过浮动可以制作，哎可以什么呢？哎，可以制作一些什么呢？诶一些我们这个水平方向的一个布局啊，水平上布局，所以浮动就这么一个目的，所以假如说我有三个div box1 box2 box3，我想让他们水平排列，最简单的方式就是让他们哥三全都。

浮动啊，才能浮动，先稍微体会一下，待会儿我们还要去说，因为还没说完啊，我们停一下。