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. lastlogon

    function Get-ADUserLastLogon($userName) { $dcs = Get-ADDomainController -Filter {Name -like "*& ...

  2. wms证书配置操作

      1. 在应用的/home下 把证书cp到/usr/local/apache2/conf 2. 打开文件/usr/local/apache2/conf/extra/httpd-ssl.conf,找到 ...

  3. error: RPC failed; curl 56 GnuTLS recv error (-54): Error in the pull function.

    . . . . . 今天从 github 上 clone 代码的时候,出现了一个错误,重试多次后仍然出现,错误如下: >$ git clone https://github.com/BOINC/ ...

  4. Python正则简单实例分析

    Python正则简单实例分析 本文实例讲述了Python正则简单用法.分享给大家供大家参考,具体如下: 悄悄打入公司内部UED的一个Python爱好者小众群,前两天一位牛人发了条消息: 小的测试题:  ...

  5. Houdini Mac 添加external editor

     我的尝试: 1. 找到houdini.env文件 2. 修改env文件,添加 EDITOR = ""/Applications/Sublime Text.app/Contents ...

  6. 量化编程技术—numpy与统计学

    # -*- coding: utf-8 -*- # @Date: 2017-08-26 # @Original: import numpy as np # 200支股票 stock_cnt = 200 ...

  7. Xamarin Assets文件读取

    在Assets文件夹中添加nlog.config文件,在属性中将Build Action设置为AndroidAsset var steam = Assets.Open("nlog.confi ...

  8. linux 安装 btrace

    1.下载btrace https://github.com/btraceio/btrace/releases/download/v1.3.8.3-1/btrace-bin-1.3.8.3.tgz2.上 ...

  9. Android MVP模式简单介绍：以一个登陆流程为例

    老的项目用的MVC的模式,最近完成了全部重构成MVP模式的工作,虽然比较麻烦,好处是代码逻辑更加清楚.简洁,流程更加清晰,对于后续版本迭代维护都挺方便.对于一些想要学习MVP模式的同学来讲,百度搜出来 ...

  10. navcat excel数据导入mysql的方法

    navcat excel数据导入mysql的方法 先navcat导出 xls格式 然后把数据复制到往这个xls里 (按照这个xls格式) 然后导入mysql就行了 如果导入的过程无法识别excel里的 ...