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. 【java编程】vo、po、dto、bo、pojo、entity、mode如何区分

    Java Bean:一种可重用组件,即“一次编写,任何地方执行,任何地方重用”.满足三个条件 类必须是具体的和公共的 具有无参构造器 提供一致性设计模式的公共方法将内部域或暴露成员属性 VO valu ...

  2. arcpy地理处理工具案例教程-将细碎图斑按相同属性或相近属性合并相邻图斑

    arcpy地理处理工具案例教程-将细碎图斑按相同属性或相近属性合并到相邻图斑 商务合作,科技咨询,版权转让:向日葵,135-4855_4328,xiexiaokui#qq.com 目的:针对存在的细碎 ...

  3. mysql 大小写不敏感

    lower-case-table-names=1 变量lower-case-table-names的取值 取值范围有三个,分别是0.1.2. 1. 设置成0:表名按你写的SQL大小写存储,大写就大写小 ...

  4. Nodejs 包与 npm第三方模块安装和 package.json 以及 cnpm

    包与 NPM 1. 包 Nodejs 中除了它自己提供的核心模块外,可以自定义模块,也可以使用第三方的模块.Nodejs 中第三方模块由包组成,可以通过包来对一组具有相互依 赖关系的模块进行统一管理. ...

  5. 【SpringBoot】SpringBoot 国际化（七）

    本周介绍SpringBoot项目的国际化是如何处理的,阅读本章前请阅读[SpringBoot]SpringBoot与Thymeleaf模版(六)的相关内容 国际化原理 1.在Spring中有国际化Lo ...

  6. nginx 分离配置文件 conf.d和default.conf

    1. 在 nginx.conf 文件中引用 conf.d 下的所有配置文件 #在http配置节的末尾添加配置引用 http { ... #gzip on; include /etc/nginx/con ...

  7. JEECG实现模糊查询

    1.JEECG默认不带模糊查询的,但实际开发中会经常用到模糊查询,因此要适当修改(在相应的查询处). @RequestMapping(params = "datagrid") pu ...

  8. SonarQube - 常用配置与操作

    1 - SonarQube服务器中的数据库配置 2019年4月10号,SonarQube发文称在7.9之后,所有的SonarQube的版本(CE.DE.EE和DCE)中将停止对MySQL的支持. 建议 ...

  9. Linux磁盘空间不足

    Linux磁盘空间不足 描述:zabbix报警磁盘空间不足 1.登录服务器,查看磁盘空间 2.筛选空间占用的文件 层层筛选 3.将没用的文件删除 rm -f /opt/export/log/np_se ...

  10. Python窗体操作函数

    实现了一个window下对窗体操作的类,实现的功能如:移动窗体.获取窗体位置和大小.截取窗体图片.坐标转换等. 直接上代码: # coding=utf-8 import win32con import ...