float与position间的区别：
    个人理解为：脱离文档流不一定脱离文本流；但脱离文本流，则也脱离文档流。【如有更好的理解还望评论区一起探讨，共同学习进步】
一、float 浮动(脱离文档流，不脱离文本流)
    float的两种功能作用：
        a.元素脱离文档流，但不脱离文本流。(即：该元素区域浮动起来，但是处于元素里面的文本信息不会脱离文档)
        b.当行内元素使用float浮动时，类似于将该元素设置为行内块级元素，可以为其设置宽高并在一行显示。
    示例代码如下:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>浮动与定位小区别</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            div{

                width: 200px;

                height: 200px;

            }

            .one{

                float: left;

                /*position: absolute;*/

                background: #bfe;

                margin-top: 40px;

            }

            .two{

                /*珊瑚色*/

                background: coral;

            }

        </style>

    </head>

    <body>

        <div class="one"></div>

        <div class="two">浮动文档流测试</div>

    </body>

    </html>

二、position 定位(脱离文档流也脱离文本流)【相关position知识前面随笔有提及，这里使用absolute为例】
    position:absolute; 绝对定位；脱离文本流，不保留原来的位置空间。
    示例代码如下:

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title>浮动与定位小区别</title>

        <style type="text/css">

            *{

                margin: 0;

                padding: 0;

            }

            div{

                width: 200px;

                height: 200px;

            }

            .one{

                /*float: left;*/

                position: absolute;

                background: #bfe;

                margin-top: 40px;

            }

            .two{

                /*珊瑚色*/

                background: coral;

            }

        </style>

    </head>

    <body>

        <div class="one"></div>

        <div class="two">相对定位文本流测试</div>

    </body>

    </html>

三、float 浮动  【父元素float浮动对子元素float浮动产生的影响】
    
    说明：当父元素定义为float时，其是脱离文档流的，但当其子元素再设置为float浮动时，子元素只会含有
    float的另一功能，将行内元素【内联元素】转化为行内块级元素，而且脱离文档流的特性不会显现出来。
    示例代码如下：

    <!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <body>

        <div style="width: 400px;height:200px;background:cyan;">

            <span style="float:left;width: auto;height:100%;background:coral;">

                <i style="background: #bfe;float: left;width: 100px;">hello world</i>

            </span>

        </div>

    </body>

    </html>

float与position间的区别的更多相关文章

  1. 脱离文档流两操作，float和position:absolute的区别

    文档流:将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,块状元素独占一行,内联元素不独占一行: CSS中脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离 ...

  2. 关于css float 属性以及position:absolute 的区别。

    1.float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素.div一个典型的块 ...

  3. float和position谁好？

    float从字面上的意思就是浮动,float能让元素从文档流中抽出,它并不占文档流的空间,典型的就是图文混排中文字环绕图片的效果了.不过需要注意的是清除浮动是我们可能需要注意的地方.而position ...

  4. CSS 中，用 float 和 position 的区别是什么？

    CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...

  5. float和position:absolute脱离文本流的区别

    float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...

  6. CSS 盒子模型及 float 和 position

    ## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...

  7. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  8. css里面position:relative与position:absolute的区别

    position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览 ...

  9. array_unique和array_flip 实现去重间的区别

    array_unique和array_flip 实现去重间的区别 ​php有内置函数array_unique可以用来删除数组中的重复值, phperz~com (PHP 4 >= 4.0.1,  ...

随机推荐

  1. 哈希表查找（散列表查找） c++实现HashMap

    算法思想: 哈希表 什么是哈希表 在前面讨论的各种结构(线性表.树等)中,记录在结构中的相对位置是随机的,和记录的关键字之间不存在确定的关系,因此,在结构中查找记录时需进行一系列和关键字的比较.这一类 ...

  2. 面试突击（七）——JVM如何加载Java字节码信息的？

    声明:本文图片均来自网络,我只是进行了选择,利用一图胜千言的力量来帮助自己快速的回忆相关的知识点 1:先看一下Java类文件的转换过程,如下所示,Java字节码文件是通过类加载子系统来放入JVM的内存 ...

  3. 重装系统之前需要做的checklist

    1. 各浏览器 ---- 导出收藏夹 2. 备份桌面 3. 查用工具截图保存.保存使用了哪些工具 4.查看C盘有没有放置其他资料,需要备份的

  4. VUE-012-图表 v-charts 学习（一）饼图展示状态

    软件质量平台中需要输出各种各样的图表数据,以 v-charts 中的饼图为例,记录图表使用实现过程. v-charts :https://github.com/ElemeFE/v-charts doc ...

  5. Jenkins build 后 tomcat 启不来

    Jenkins build 后 war 包复制到 tomcat 下,启不来 添加 :export BUILD_ID=dontKillMe /usr/local/iron/tomcat8085/bin/ ...

  6. 【错误解决】UnicodeDecodeError: 'gbk' codec can't decode byte 0xad in position 840: illegal multibyte sequence

    原文来源:https://www.zhihu.com/question/22699590 编码问题错误,读入文件的时候指定编码即可. with open(fname, encoding='utf-8' ...

  7. Springboot+Quartz+druid+多库

    很久以前就用过quartz,现在重新用起,主要实现集群方式启动,并且支持多数据源注入到job中.网上demo很多,方法大同小异.但关于数据源注入的深入介绍不多,不错的文章:<spring-boo ...

  8. DataPipeline ｜ApacheKafka实战作者胡夕：Apache Kafka监控与调优

    https://baijiahao.baidu.com/s?id=1610644333184173190&wfr=spider&for=pc DataPipeline |ApacheK ...

  9. [转帖]Java升级那么快，多个版本如何灵活切换和管理？

    Java升级那么快,多个版本如何灵活切换和管理? https://segmentfault.com/a/1190000021037771 前言 近两年,Java 版本升级频繁,感觉刚刚掌握 Java8 ...

  10. 在CAD中插入谷歌地球卫星地图

    本文主要介绍如何在CAD中插入谷歌地球卫星地图,作为参照光栅图像.谷歌地球卫星地图使用“迈高图-地图数据下载器”(以下简称:迈高图)下载.迈高图会给出相关插入参数(插入点和缩放比例),保证插入卫星地图 ...