DDR爱好者之家 Design By 杰米
关于float的一些用法
左悬浮: float:left;
右悬浮:float:right;
float用法
float的用途比较广, 这里简单的介绍下集中常有的用法:
- 在接触到浮动前,我会去设置一些inline-block, block的属性配合着div的镶嵌 去完成页面的排版. 而后接触到了浮动这一属性, 直接让元素漂浮起来简易了很多,悬浮中不区分块级元素(block),行内元素(inline),或者是行内块元素(inline-block). float也会随着父元素width大小的改变而自动排版,eg.直接调整可视窗口,会将元素挤到下一行.
- 此外, 就刚了解的SEO优化而言, 由于浏览器的解析是从上而下的. 因此很多时候重要的内容写在前面,把一些不重要的或者是广告什么的写在后面.但是又想让用户注意到广告,因此,很多时候把主内容居中排列, 广告这些的左右悬浮, 相信经常浏览网页的朋友的也注意到了这点接下来来讲讲悬浮的一些书写和效果吧
如果子元素悬浮了,会造成父元素的高度塌陷.这块涉及到了清除悬浮,下一章会提及清除悬浮的讲解
那么言归正传,
第一个现象 float=inline-block
悬浮会是4个方块变成行内块模式的样式呈现:如下图所示
<style> div{ width:200px; height:200px; background-color: pink; border:1px solid black; float:left; } </style>
<body> <div></div> <div></div> <div></div> <div></div> </body>
第二现象:
如下图所示, 由于第一个悬浮起来了,因此第二个块元素会呈现在第一个下面.
但是后面一个元素悬浮起来,不会越过到前面一个元素上面,如第四个块元素悬浮,但是第三个没有悬浮.第四季块元素保持在原来位置上.
<style> .first-one{ float:left; background-color:green; } .second-one{ background-color:purple; } .third-one{ background-color:blue; } .fourth-one{ float:left; background-color:grey; } div{ width:200px; height:200px; background-color: pink; border:1px solid black; font-size:30px; } </style>
<body> <div class= "first-one"></div> <div class= "second-one"></div> <div class= "third-one"></div> <div class="fourth-one"></div> </body>
第三个现象:
如果元素全部漂浮, 父元素剩余宽度不够支持子元素在该行排列 那么他会向上一级靠齐
本文转自:https://segmentfault.com/a/1190000022669455
总结
DDR爱好者之家 Design By 杰米
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
DDR爱好者之家 Design By 杰米
暂无评论...
更新日志
2024年05月22日
2024年05月22日
- 《邓紫棋精选》[FLAC/分轨][980MB]
- 出发吧麦芬尤米尔深渊试炼怎么过 尤米尔深渊阵容打法攻略
- dnf属性lv转移是什么意思
- dnf属性成长用什么材料
- 《贪婪之秋2》登陆平台介绍
- 《机器节奏》成就达成条件一览
- 2024年04月13日
- TOGE-12083-84【TchaikovskySwanlake-AndrePrevin】2CD【ISO】
- SusieArioli,JordanOfficer-NightLights[SP1020](2014)[FLAC]
- 东野圭吾改编新片《彷徨之刃》豆瓣6.6:寡淡又平庸
- 游戏史的绝对经典 CDPR庆祝《巫师3》9周年纪念!
- 波音又出事!一架载468人大型客机的引擎突然起火
- 群星.1994-华纳IN爆榜3辑【华纳】【WAV+CUE】
- 古巨基.2008-GUITAR.FEVER(LPCD45)【金牌大风】【WAV+CUE】
- 自然卷.2005-大卷包小卷【风和日丽】【WAV+CUE】