概念
想像一下,在一个装满水的水桶里面,我把一个乒乓球按到水里面去,我一松手,这个球就一定会浮到水面上,这个就是乒乓球的浮动。同理,浮动元素就类似于乒乓球,会有这种浮动的特性。
浮动哪里
按在水里的乒乓球一松水一定会浮到水面上,但这个乒乓球最多最多只能浮动到这个水桶的水面上,不可能脱离地心引心浮到天花板上,那浮动元素也是一样的,比如说它可以浮动到其父元素内容的左上角float:left
或者右上角float:right
多个乒乓球
往水桶里继续加多一个又一个的乒乓球,这很符合直观直觉,先放在水里的球会先浮上来占据某个位置,后进来的球会再浮上来再接着占位置,浮动元素也是一样会一个个先后占位置,不同之处在于浮动元素浮动起来占的位置是有顺序一个个排列的,比如浮起来后从左向右排float:left
,而乒乓球浮到水面的位置就不太好预测了,毕竟浮动元素不是真正的乒乓球,我们需要多一点点的秩序和稳定。
水面上都是乒乓球
当水面上都浮满了乒乓球后,剩下的球就浮不到水面上了,只能浮到原来水面上的乒乓球的下面了。浮动元素也是如此,父元素最上方的空间被浮满了,或以剩下的空间不够再挤一个元素时,就会重新换一行继续向左浮动
大小不一的乒乓球
一个比较大的乒乓球浮起来后会占比较大的位置,导致后面浮起来的球的位置就比较尴尬。而不同的浮动元素如果宽高有差异也会出现这种问题:看起来就像球4被卡在了球1和球2之间
水桶与乒乓球的关系
虽然现在水桶里浮满了乒乓球,占据了一定的空间,但是对水桶而言,它并不承认水里面有什么东西,它认为水里面就是空的,它觉得乒乓球都特么浮走了、浮走了、浮走了(重要的话说3遍)!嗯哼,现实嘛,有时就是这么扯,不讲道理!
对于浮动元素的父元素而言也是这样的,虽然父元素里挤满了浮动元素,但它认为它的内容就是空的。
导致的问题
既然水桶不承认乒乓球,父元素不想认它的浮动元素,那就会出现水桶的总体质量的计算出了问题,乒乓球虽小,但也是有质量的嘛!
对父元素而言,即然它不认浮动元素,那它的内容就是空的,既然是空的,那哪来的内容宽度和高度,这就是高度问题
对症下药
既然水桶不承认水里有乒乓球,那我再放点别的进去咯!
父元素也是如此,在其子元素追加个非浮动元素,解决的思路大概是这样!
乒乓球与其它非乒乓球的关系
不仅水桶不承认水里有乒乓球,水里的其它锅碗飘盆也对乒乓球视而不见
同样的,父元素里的其它非浮动元素也是这种态度。
乒乓球和浮动元素既然都不被承认,那么它们占据着的空间
其它的元素就会要占着。
都霸占同个坑
不承认不代表真的不存在,结果就会出现两个元素都占着同样的位置,就像两个人一前一后的站在同个地方,如果前面的人比较廋,那就能看到后面的
有问题都可以解决
这种占同个坑现象本身是有它的作用的,当然也同样是可以有方法清除到这种现象的,元素的clear
属性就是来清除这种现象的,就不再继续解释下去了!
浮动有什么用
说了这么多,该说说它的存在问题了,听起来好像要聊哲学了:我为什么存在?我在哪?我要去哪里?。
用的比较多的就是用来做网页的导航栏,一进到某个网页,导航条就像乒乓球一样浮到页面较上方的位置。
比如像这样子:像不像一个个浮在水面上的乒乓球?