HTML悬浮float如何用 HTML悬浮float用法

HTML悬浮float如何用？本篇文章小编给大家分享一下HTML悬浮float用法，代码介绍的很详细，小编觉得挺不错的，现在分享给大家供大家参考，有需要的小伙伴们可以来看看。

关于float的一些用法

左悬浮:float:left;

右悬浮:float:right;

float用法

float的用途比较广, 这里简单的介绍下集中常有的用法:

在接触到浮动前，会去设置一些inline-block, block的属性配合着div的镶嵌 去完成页面的排版. 而后接触到了浮动这一属性, 直接让元素漂浮起来简易了很多,悬浮中不区分块级元素(block),行内元素(inline),或者是行内块元素(inline-block). float也会随着父元素width大小的改变而自动排版,eg.直接调整可视窗口,会将元素挤到下一行.

此外, 就刚了解的SEO优化而言, 由于浏览器的解析是从上而下的. 因此很多时候重要的内容写在前面,把一些不重要的或者是广告什么的写在后面.但是又想让用户注意到广告,因此,很多时候把主内容居中排列, 广告这些的左右悬浮, 相信经常浏览网页的朋友的也注意到了这点。
言归正传

第一个现象 float=inline-block

悬浮会是4个方块变成行内块模式的样式呈现:如下图所示

第二现象:

如下图所示, 由于第一个悬浮起来了,因此第二个块元素会呈现在第一个下面.

但是后面一个元素悬浮起来,不会越过到前面一个元素上面,如第四个块元素悬浮,但是第三个没有悬浮.第四季块元素保持在原来位置上.

第三个现象:

如果元素全部漂浮, 父元素剩余宽度不够支持子元素在该行排列 那么他会向上一级靠齐