用乒乓球聊聊浮动元素

概念

想像一下,在一个装满水的水桶里面,我把一个乒乓球按到水里面去,我一松手,这个球就一定会浮到水面上,这个就是乒乓球的浮动。同理,浮动元素就类似于乒乓球,会有这种浮动的特性。

浮动哪里

按在水里的乒乓球一松水一定会浮到水面上,但这个乒乓球最多最多只能浮动到这个水桶的水面上,不可能脱离地心引心浮到天花板上,那浮动元素也是一样的,比如说它可以浮动到其父元素内容的左上角float:left或者右上角float:right

多个乒乓球

往水桶里继续加多一个又一个的乒乓球,这很符合直观直觉,先放在水里的球会先浮上来占据某个位置,后进来的球会再浮上来再接着占位置,浮动元素也是一样会一个个先后占位置,不同之处在于浮动元素浮动起来占的位置是有顺序一个个排列的,比如浮起来后从左向右排float:left,而乒乓球浮到水面的位置就不太好预测了,毕竟浮动元素不是真正的乒乓球,我们需要多一点点的秩序和稳定。

水面上都是乒乓球

当水面上都浮满了乒乓球后,剩下的球就浮不到水面上了,只能浮到原来水面上的乒乓球的下面了。浮动元素也是如此,父元素最上方的空间被浮满了,或以剩下的空间不够再挤一个元素时,就会重新换一行继续向左浮动

大小不一的乒乓球

一个比较大的乒乓球浮起来后会占比较大的位置,导致后面浮起来的球的位置就比较尴尬。而不同的浮动元素如果宽高有差异也会出现这种问题:看起来就像球4被卡在了球1和球2之间

image.png

水桶与乒乓球的关系

虽然现在水桶里浮满了乒乓球,占据了一定的空间,但是对水桶而言,它并不承认水里面有什么东西,它认为水里面就是空的,它觉得乒乓球都特么浮走了、浮走了、浮走了(重要的话说3遍)!嗯哼,现实嘛,有时就是这么扯,不讲道理!
对于浮动元素的父元素而言也是这样的,虽然父元素里挤满了浮动元素,但它认为它的内容就是的。

导致的问题

既然水桶不承认乒乓球,父元素不想认它的浮动元素,那就会出现水桶的总体质量的计算出了问题,乒乓球虽小,但也是有质量的嘛!
对父元素而言,即然它不认浮动元素,那它的内容就是空的,既然是空的,那哪来的内容宽度和高度,这就是高度问题

对症下药

既然水桶不承认水里有乒乓球,那我再放点别的进去咯!
父元素也是如此,在其子元素追加个非浮动元素,解决的思路大概是这样!

乒乓球与其它非乒乓球的关系

不仅水桶不承认水里有乒乓球,水里的其它锅碗飘盆也对乒乓球视而不见
同样的,父元素里的其它非浮动元素也是这种态度。
乒乓球和浮动元素既然都不被承认,那么它们占据着的空间
其它的元素就会要占着。

都霸占同个坑

不承认不代表真的不存在,结果就会出现两个元素都占着同样的位置,就像两个人一前一后的站在同个地方,如果前面的人比较廋,那就能看到后面的

image.png

有问题都可以解决

这种占同个坑现象本身是有它的作用的,当然也同样是可以有方法清除到这种现象的,元素的clear属性就是来清除这种现象的,就不再继续解释下去了!

浮动有什么用

说了这么多,该说说它的存在问题了,听起来好像要聊哲学了:我为什么存在?我在哪?我要去哪里?
用的比较多的就是用来做网页的导航栏,一进到某个网页,导航条就像乒乓球一样浮到页面较上方的位置。
比如像这样子:像不像一个个浮在水面上的乒乓球?

image.png

谢谢!

转载请注明出处!
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,470评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,393评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,577评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,176评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,189评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,155评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,041评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,903评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,319评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,539评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,703评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,417评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,013评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,664评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,818评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,711评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,601评论 2 353

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,748评论 1 92
  • html概述 HTML是 HyperText Mark-up Language 的首字母简写,意思是超文本标记语言...
    青_a2c4阅读 144评论 0 0
  • 今天天气异常温暖!虽然北方的春天,远远的看去,草木依然枯黄。然而小草已经偷偷的在枯叶下探出了头。孩子们发现了春天的...
    踏雪寻梅_2457阅读 542评论 0 4
  • 白露节气已过 不出几日便是中秋 月儿要圆了 久别的人儿也要团聚了 村口的那颗老榆树呦 是不是也在等我 等我坐在她的...
    潘美人儿阅读 278评论 2 2
  • 说起传销,你们都会想它离我们很远很远对吧? 起初的我也是这么认为的,可是就在那年大三,不经意间我进入了传销。 高中...
    87风格阅读 807评论 1 2