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