浅析HTML 悬浮float的用法
|
左悬浮: float:left; 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>
第三个征象: 假如元素所有漂流, 父元素剩余宽度不足支持子元素在该行分列 那么他会向上一级靠齐 （编辑：河北网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
