2021.05.30 技術シェア
【技术浅谈】float属性

一轮明月照九州,大家好,这里是技术浅谈,我是MaFa。归功于互联网时代的发展,和电脑等移动高科技设备的普及,大家的生活也在不断的发生着变化,“足不出户看世界”已不再是虚幻,“蜗居”也不再是贬义而是一种新的生活方式。网络商城,刷剧交友,一个个现实生活中的场景都以各种各样的网页呈现在大家眼前,带领大家遨游在互联网的世界中,从而如何能够呈现各种各样丰富多彩的页面,也就是前端技术的重要性就不言而喻了。


相信各位看客在前端构建中,对于布局是再熟悉不过的了,谈到布局,我们也不得不划重点【float】这个属性,小编我也曾经迷惘在float的神(烦)奇(恼)中,今天咱们就好好的来说说这个家伙。


图片


 

float的文字环绕


float这个单词从字面上理解是“浮动”的意思,我们也可以理解成“漂浮”的意思,也就是使其作用的元素“漂浮”起来,然后再“压”入之后的布局之中。float最经常的用途是“文字环绕”效果,就是让图片被文字包裹,我们先来看一段代码。


图片


从上面的代码中我们可以看出,一个img元素后面跟着用p元素包含的一段文字,并且img元素被赋予了float:left属性。浏览器在解析这段html构成的时候先解析到了img,但因为img有浮动属性(即float:left),所以img就“漂浮”了起来,脱离了正常的文本流,对于脱离正常文本流的动作我们这样理解,img有了“超能力”,它独立成为一层悬浮出来,临时的在页面的上面一层。


然后浏览器继续解析到了之后的文字,因为文字部分没有浮动属性加持,所以它还是要规规矩矩的按照正常的文本流规则显示,加之文字之前的img元素已经悬浮了起来,所以文字会向“上”移动,“顶替”了原先img的位置并在img的位置上开始显示。最后都解析完了,悬浮的元素总是落地的,所以悬浮着的img元素被“压”入之后的文字中,因为文字是流的形式,像水一样,就会包裹住img形成了“文字包裹”的效果。


float是一个魔鬼,它会改变之后元素的布局。大家也可以理解成float属性是块头大的霸道大哥,没有float元素的是小老弟,小老弟看到了大哥,在没有其他要求的情况下小老弟要“敬重”大哥,要给大哥让路。


 

float对块级元素的布局


float的第二个应用场景是横向布局,即行间布局,让块元素在一行显示。我们还是先来看一段代码。


图片


从代码中我们不难理解,三个div(红黄蓝)是三个块级元素,所以会换行罗列显示,即纵向布局显示。当我们只给第一个红色的div添加了float属性,这个时候红色div就悬浮了起来,暂时在页面的上一层待着,它就成了老大哥。


浏览器继续解析到第二个黄色的div,因为黄色div本身没有float加持,它还是小老弟,小老弟看到老大哥(红色div)飘起来了成仙了,小老弟得顶上,所以黄色div就占据了原来红色div的位置显示,所以看起来就是红色div压住了黄色div。而蓝色div也没有float,所以还是正常的布局排版,就成为了上面看到的红色div和蓝色div纵向排列。


那如果黄色div也设置float:left会是什么效果呢?


图片


我们还是按照“老大哥 小老弟”原则来分析。红色div设置了float所以升仙成为了老大哥,接着是黄色div,黄色div也设置了float属性,所以它也晋升仙班,但是它前面有个先成仙的老大哥红色div,得讲究一个先来后到,所以黄色div就紧随红色div,也就是横向排在红色div的后面,这就形成了块级元素行内横向排列的阵仗。


接下来是蓝色div,因为蓝色div没有float属性,所以它还是一个小老弟,按照正常文档流排版不能排在黄色div后面而是顶替了原有的红色div和黄色div的位置。最后老大哥们天神下凡“压”了下来,盖住了蓝色div,所以我们看到的效果是红色div和黄色div横向排列。


讲过了这些,我们再试想一下如果红黄蓝三个div都设置float:left,又会是什么情况?相信大家按照上面的讲解一点点的抽丝剥茧不难得出,红黄蓝三个div应该是在一行横向排列。


这里不知道大家有没有想过如果div中有文字的话怎么办?


图片


这个问题其实也很简单,我们在上面讲过,文字是流式排版,没有高度没有宽度,内容有多少作用范围就多大(当然也规范于父元素的边框),不像div是块级元素,作用域是行,当老大哥泰山压顶的时候,文字内容一看这架势就怂了,就乖乖的包裹簇拥住老大哥了。如果老大哥把文字父元素的空间都“压”住了,文字内容就会被“挤”出原来的边框换行显示。


 

Clear属性屏蔽float


既然float是魔鬼,那有没有限制这个魔鬼的方法呢?正所谓一物降一物,当我们想屏蔽float的时候我们就会用到clear这个属性。clear可以清除作用元素的左边或者右边或者两边的float的作用。我们来看一个clear的例子。


图片


从代码中我们知道红色div和黄色div一个被设置了float:left一个被设置了float:right,根据我们上面的讲解红色div和黄色div在解析的时候都被认为是老大哥升仙了,既然升仙了,那么他们外面的父元素div也知道自己管不了它们了,毕竟人仙有别,所以父元素div就缩小到什么都没有的程度了。


这个也是我们布局的时候经常遇到的问题,如果我们要给父元素添加背景颜色,那岂不是怎么着都覆盖不了红色div和黄色div?为了解决这个问题我们就会使用到clear,我们可以在黄色div后写一个空的div并将clear属性赋予它。


我们先看看clear:left是什么效果?


图片


我们可以看到背景颜色完全被赋予上了,为什么?


因为这个时候父元素中虽然管不了升仙的两位大哥,但是因为空div是正常文档流的排版,父元素还是能管它的,又因为空div设置了clear:left,也就是左侧(html文档流中的左侧就是上一个元素)屏蔽浮动,所以它就不顶替大哥的位置,老老实实在自己的位置上待着,从而父元素就包裹了全部。


那么clear:right是什么效果呢?


没有例外也是同样的效果,我们刚刚说过div作用域是行,对于空div这一行的左边就是红色div,右边就是黄色div,右边屏蔽浮动元素,所以空div也是乖乖的占一行在它原来的位置显示。


我们可以分别设置对左边浮动元素的clear,也可以设置对右边浮动元素的clear,不过为了保靠不用那么烧脑,我们一般会使用clear:both来同时清楚两边的浮动元素来达到上述效果。


相信通过上面的讲解,大家对于float和如何屏蔽float都有所了解,希望大家在实际应用中对于float不再迷茫,正所谓魔高一尺道高一丈,float也不再是麻烦。


 


 


图片