浅析HTML 悬浮float的用法

所属分类: HTML/Xhtml / 网页制作 阅读数: 511
收藏 0 赞 0 分享

关于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

到此这篇关于浅析HTML 悬浮float的用法的文章就介绍到这了,更多相关html 悬浮float内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!

更多精彩内容其他人还在看

用标准dl,dt,dd标签抛弃table列表

现在,越来越多的前端开发er们开始使用xHTML+CSS替代最初的table布局完成网页的整体布局,不但让网站降低了开发和维护的成本,而且代码也更语义化了。但是,并不是说table从此消失了,它仍然被很多人用来作为网页中数据表现的必需品,比如个人信息数据列表等。事实上,使用HTM... 查看详情
收藏 0 赞 0 分享

HTML网页中的URL表示方式

在HTML中,常见的URL有多种表示方式: 相对URL: 复制代码代码如下: example.php demo/example.php ./example.php ../../example.php /example.php 绝对URL: 复制代码代码如下: http://jb5... 查看详情
收藏 0 赞 0 分享

Web页面 自定义选择框Select

select下拉列表表单可能大家都很熟悉,不过默认的下拉列表表单往往会让一些网站觉得丑陋,同时用CSS也很难调整select的样式。因此许多网站位了做出更符合网站风格的select下拉表单,往往会用JS来模拟这种效果。比如我们很熟悉的土豆网,淘宝商城和亚马逊都是用JS做的下拉列表... 查看详情
收藏 0 赞 0 分享

html 标签ID可以是变量

<table id=" <%=var1%>">,调用的时候必须用var1的实际值了 JS里面也是一样 document.getElementById(" <? echo $blogid; ?>"); 具体... 查看详情
收藏 0 赞 0 分享

iframe 自适应大小实现代码

页面域关系: 主页面a.html所属域A:www.jb51.net 被iframe的页面b.html所属域B:www.jb51.cn,假设地址:http://www.jb51.cn/b.html 实现效果: A域名下的页面a.html中通过iframe嵌入B域名下的页面b.htm... 查看详情
收藏 0 赞 0 分享

40多个漂亮的网页表单设计实例

网页表单是访问者与网站拥有者主要的沟通途径。返馈总是重要的,这就是我们为什么确保网页表单容易理解和使用起来比较直观的原因,尽管如此,甚至在形式设计中它也担当创意中的有效部分。网页表单并非都是乏味的,使用css或flash,你能确保它们具有吸引力且有效。要注意,你需要提出一些独特且... 查看详情
收藏 0 赞 0 分享

HTML减肥 精简HTML标记制作网页

HTML 4HTML (非XHTML),MIME type 为 text/html ,允许省略一些标签。通过 HTML 4 DTD,你可以省略以下标签(那些所谓可避免的元素,这里用删除线加以标记)</area></base><body><... 查看详情
收藏 0 赞 0 分享

HTML网页制作教程 谨慎使用iframe标记

使用 iframe 可以轻易的调用其他网站的页面,但应谨慎使用。它比创建其他 DOM 元素(包括 style 和 script)多耗费数十甚至数百倍的性能。增加100个不同元素的时间对比显示 iframe 是多么耗费性能: 使用 iframe 的页面通常没有这么多 if... 查看详情
收藏 0 赞 0 分享

HTML 网页头部代码全清楚

以下所有代码全是在<head>...</head>之间,具体内容有:1,<title>…</title>标题元素,帮助用户更好识别文件,有且只有一个。当作为首页或收藏时做文件名。2,<link>&helli... 查看详情
收藏 0 赞 0 分享

HTML 5 Reset Stylesheet

这份css reset是在Eric Meyers的 CSS reset基础上修改出来的,特别针对HTML5调整了相应标签的初始化样式。 /* html5doctor.com Reset Stylesheet v1.4 2009-07-27 Author: Richard Clar... 查看详情
收藏 0 赞 0 分享
查看更多