属性什么意思_技术浅谈——float属性

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

相信各位看客在前端构建中，对于布局是再熟悉不过的了，谈到布局，我们也不得不划重点【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也不再是麻烦。