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. ul的li元素水平并居中的css

    ul{ text-align:center; } li{ display:inline } 这样li元素不需要float且可以居中 比较好样式如下 ul li { // float: left; pa ...

  2. linux下检查网络连通情况

    MTR是一种简单的跨平台命令行网络诊断工具,它将常用的traceroute和ping程序的功能组合到一个工具中. 与traceroute类似, mtr输出关于数据包从运行mtr的主机到用户指定的目标主 ...

  3. 【转】SQL2008 链接Oracle 调用存储过程

    1. SQL链接ORACLE 都是可视化的操作 如下图: 红色框选的是oracle的数据驱动,如果没有这个驱动 那需要单独安装oracle的client端 装完以后就有了. 2.在创建之前,在SQLS ...

  4. 【Python】解析Python中的文件操作

    目录结构: contents structure [-] 简介 Python中的文件类型 内置函数的文件操作 open()函数 Mode 创建文本文件 读取文本文件 循环文件对象 关闭文件 With语 ...

  5. kafka window环境下使用（内置zookeeper）

    下载 kafka 官网下载最新版本(已集成 zookeeper) 解压到 D 盘的 kafka_2.12-2.3.0 运行 zookeeper 执行 zookeeper 运行命令 D:\kafka_2 ...

  6. 查看ssh有没有被黑的IP

    #grep "Failed password " /var/log/auth.log | awk '{print $11}' | sort | uniq -c | sort -nr ...

  7. 第一节：Python+Selenium环境搭建

    一.selenium工作原理 二.安装python Window系统下,python的安装很简单.访问python.org/download,下载最新版本,安装过程与其他windows软件类似.记得下 ...

  8. FineReport简单上手

    一.简介 FineReport是一个企业级报表制作.分析和展示工具 官网可以下载个人版进行体验学习:(windows版本设计器) https://www.finereport.com/product/ ...

  9. Python - Django - 中间件 process_exception

    process_exception(self, request, exception) 函数有两个参数,exception 是视图函数异常产生的 Exception 对象 process_except ...

  10. Why Python's Integer Division Floors ---- python int（6/-132）时答案不一致，向下取整

    leetcode150题中有一个步骤: int(6/-132) == 0 or ==-1? 在自己本地python3环境跑是int(6/-132) =0,但是提交的时候确实-1. 查找相关资料解惑: ...