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. 【spring源码学习】spring事务中的嵌套事务中的保存点相关知识

    JDBC事务保存点(setSavepoint, releaseSavepoint )实例 以下是使用事务教程中描述的setSavepoint和回滚的代码示例. 此示例代码是基于前面章节中完成的环境和数 ...

  2. 一个按权重（weight）进行LB的算法

    package netty; import com.google.common.collect.ImmutableList; import lombok.SneakyThrows; import ja ...

  3. k8s记录-node组件部署（十）

    1)CA 证书配置登录 192.168.0.1 app 用户下cd ssl/kubernetes#注意修改 KUBE_HOME,BOOTSTRAP_TOKEN #与 3.5 3)token 一致,KU ...

  4. 实例句柄0x10000000有什么特别之处？What is so special about the instance handle 0x10000000?

    当Load­Library函数返回特殊值时,客户想知道它意味着什么0x10000000.嗯,这意味着LIB被加载进了0x10000000?好的,这里有一些更多的信息:“我们正在尝试调试一个加载DLL的 ...

  5. maven-archetype-plugin 的正确打开方式

    1.  准备好一个编辑好的模板工程 2. 在 pom.xml 中添加 maven-archetype-plugin 插件 <plugin> <groupId>org.apach ...

  6. Spring Boot JDBC：加载DataSource过程的源码分析及yml中DataSource的配置

    装载至:https://www.cnblogs.com/storml/p/8611388.html Spring Boot实现了自动加载DataSource及相关配置.当然,使用时加上@EnableA ...

  7. Javacript Remove Elements from Array

    參考自: https://love2dev.com/blog/javascript-remove-from-array/ 1. Removing Elements from End of Array ...

  8. PHP- 如何在终端输出带颜色的字体？

    转自: http://www.neatstudio.com/show-2568-1.shtml 终端显示颜色,在以前的想法当中,都是因为有了.profile的配色方案.而我一般也都是 采用默认的(sn ...

  9. Locust 性能测试工具安装使用说明

    1. 介绍     它是一个开源性能测试工具.使用 Python 代码来定义用户行为.用它可以模拟百万计的并发用户访问你的系统. 性能工具对比 LoadRunner 是非常有名的商业性能测试工具,功能 ...

  10. SQL Server 特殊字符及中文汉字的处理

    简介 在SQL Server 中很多时候需要对一些字段中特殊的字符做处理,比如某个字段中包含一些回车.制表.换行等特殊字符(这些字符往往来源于Excel).这些特殊字符的存在可能导致无法提取到所需数据 ...