站长家园(原代码之家)(www.adminjie.com)网站源码,微信源码,游戏源码,商业源码分享平台。
当前位置:网站首页 技术文章 网络编程 正文

css3中浮动占有位置吗

时间:2021-12-17 [网络编程]作者:fabuyuan 浏览:8 次

css3中浮动占有位置。float浮动的元素可以脱离标准文档流,摆脱块级元素和行内元素的限制,但是没有脱离文本流,因此仍然会占据位置,其他的文本内容会按照顺序继续排列。

css3中浮动占有位置吗  2

本教程操作环境:windows7系统、CSS3&&HTML5版、Dell G3电脑。

css3中浮动占有位置。

元素浮动的特性:

1、浮动的元素脱离了标准文档流,摆脱块级元素和行内元素的限制

2、浮动的元素存在相互贴靠的效果,当宽度不够的时候,会出现自动换行

3、浮动的元素虽然脱离了标准文档流,但是没有脱离文本流,出现被字包围的效果

float浮动跟position:absolute一样拥有脱离文档流的功能,但是float虽然脱离了文档流但是仍然会占据位置,其他的文本内容会按照顺序继续排列——如果你对所有的元素都设置了浮动,你会看到这几个p并不会重叠,而是会顺序排列。可以参考设置display:none,跟visible:hidden的效果。

其他盒子看不见被float的元素,但是其他盒子里的文本看得见

float浮动:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动float和absolute区别</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        .first {
            width: 150px;
            height: 100px;
            /*float: left;*/
            display: inline-block;
            background: pink;
            border: 10px solid red;    /*增加了边框*/
        }
        .second {
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
            float: left;      /*只设置一个浮动*/
        }
        .third{
            width: 50px;
            height: 100px;
            /*float: left;*/
            display: inline-block;
            background: green;
        }
    </style>
</head>

<body>
 <div>
    <div>123</div>
    <div>456</div>
    <div>789</div>
 </div>
</body>
</html>

将第27行设置改成position:absolute;如下图

css3中浮动占有位置吗  2

将第27行设置改成position:absolute;加上left:0;如下图

css3中浮动占有位置吗  2

例子3.脱离文档流对比

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>浮动float和absolute区别</title>
    <style>
        .box{
            width: 500px;
            height: 300px;
            border: 1px solid black;
            margin: 0 auto;
            position: relative;
        }
        .first {
            width: 150px;
            height: 100px;
            /*float: left;*/
            display: inline-block;
            background: pink;
            border: 10px solid red;    /*增加了边框*/
        }
        .second {
            width: 100px;
            height: 100px;
            background: blue;
            display: inline-block;
            position: absolute;
            left:0;
            opacity: 0.8
            /*float: left;*/

        }
        .third{
            width: 50px;
            height: 110px;
            float: left;
            display: inline-block;
            background: green;
            /*position: absolute;*/
        }
    </style>
</head>

<body>
 <div>
    <div>123</div>
    <div>456</div>
    <div>789</div>
 </div>
</body>
</html>

css3中浮动占有位置吗  2

absolute是脱离文档流优先级更高

浮动解析

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
    .box{width:500px;height:500px;border: 5px solid green;}
        .first {
            width: 200px;
            height: 200px;
            border: 3px solid red;
            float:left;    /*左浮动*/

        }
        .second {
            width: 150px;
            height: 100px;
            border: 3px solid blue;
            
        }
        .third{
            width: 110px;
            height: 100px;
            border: 3px solid grey;
            float:left;    /*左浮动*/
        }
    </style>
</head>
 
<body>
 <div>
    <div>123</div>
    <div>456</div>
    <div>789</div>
 </div>
 <div>我是文字</div>
</body>

效果图:

    css3中浮动占有位置吗  2

图中
  第一个元素红色边框——左浮动

  第二个元素蓝色边框

  第三个元素灰色边框——左浮动

注:浮动的意思就是脱离文档流,什么是浮动脱离文档流呢?顾名思义,浮动就是相当于把元素漂浮在没有设置浮动元素的上方(就好比如没浮动的代表大地,浮动则相当于白云一样漂浮在天空,而自己则是在比白云更高的高度俯瞰大地,你俯视哦那块地被白云遮住了,你只能看到白云却看不到大地,这就是浮动),从图中就可以看出蓝色边框被红色边框覆盖掉,怪异的是没浮动的文字内容跑到了浮动之外,通过这些你大概也清楚了吧,float跟absolute都是脱离文档流的区别。

看到这里你可能会疑惑为什么第三个元素灰色边框会在红框中间而不是上方呢?

答:第二个元素没有设置浮动,第三元素浮动是按第二个浮动的顺序和位置去浮动的,第三个元素只有当第四个元素(未设置浮动的情况下)出现才能看出浮动在上方效果

浮动和定位的区别:

  • 浮动还会占据原来的位置

  • 定位会脱离文档流,不占据原来的位置

如果三个元素均设置了浮动,则按顺序位置并排在一排,产生的问题是会使父元素(没设置宽高情况下)高度坍塌从而使边框合并,解决的方法就是清除浮动。

若第二个元素设置了宽高,则第三个元素浮动会漂浮在宽高之外。

浮动float的原本作用是为了实现文字环绕效果

(学习视频分享:css视频教程

以上就是css3中浮动占有位置吗的详细内容,更多请关注站长家园其它相关文章!

本文标签:  css3浮动

转载请注明来源:css3中浮动占有位置吗

本文永久链接地址:https://www.adminjie.com/post/6563.html

免责声明:
本站所发布的一切资源仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢该程序,请支持正版软件,购买注册,得到更好的正版服务。

附:
二○○二年一月一日《计算机软件保护条例》第十七条规定:为了学习和研究软件内含的设计思想和原理,通过安装、显示、传输或者存储软件等方式使用软件的,可以不经软件著作权人许可,不向其支付报酬!鉴于此,也希望大家按此说明研究软件!

版权声明:
一、本站致力于为软件爱好者提供国内外软件开发技术和软件共享,着力为用户提供优资资源。
二、本站提供的部分源码下载文件为网络共享资源,请于下载后的24小时内删除。如需体验更多乐趣,还请支持正版。
三、我站提供用户下载的所有内容均转自互联网。如有内容侵犯您的版权或其他利益的,若有侵犯你的权益请:提交版权证明文件到邮箱 2225329873#qq.com(#换为@) 站长会进行审查之后,情况属实的会在三个工作日内为您删除。

  • 站长家园(原代码之家)会员升级
  • 最新文章
    • 空格键的功能有哪些

      空格键的功能有哪些

      空格键的功能:1、添加空格;2、网页翻页;3、播放器的暂停或播放;4、在游戏中,用于跳过动画、跳跃、还原画面、攻击或暂停等;5、和Ctrl键一起使用,用于切换中...

    • 怎样修改oracle的连接数

      怎样修改oracle的连接数

      方法:1、利用“altersystemsetprocesses=修改连接数scope=spfile”语句修改数据库允许的最大连接数;2、修改之后...

    • 你知道Golang怎么封装PHP常用函数吗!go-to-php

      你知道Golang怎么封装PHP常用函数吗!go-to-php

      本文由golang教程栏目给大家介绍关于Golang怎么实现PHP常用函数,希望对需要的朋友有所帮助!Golang实现PHP常用函数go-to-php用Gola...

    • oracle数据修改语句是什么

      oracle数据修改语句是什么

      在oracle中,数据修改语句是update语句,该语句的作用就是修改表中指定的数据,语法为“UPDATE表名称SET列名称=新值WHERE条件”...

    • HTML中哪种标签有边框

      HTML中哪种标签有边框

      HTML中有边框的标签:1、input标签,用于规定用户可以在其中输入数据的输入字段;2、hr标签,用于插入一条水平线;3、textarea标签,用于定义一个多...

    热门文章