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

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>浮动与定位小区别</title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             div{
  12.                 width: 200px;
  13.                 height: 200px;
  14.             }
  15.             .one{
  16.                 float: left;
  17.                 /*position: absolute;*/
  18.                 background: #bfe;
  19.                 margin-top: 40px;
  20.             }
  21.             .two{
  22.                 /*珊瑚色*/
  23.                 background: coral;
  24.             }
  25.         </style>
  26.     </head>
  27.     <body>
  28.         <div class="one"></div>
  29.         <div class="two">浮动文档流测试</div>
  30.     </body>
  31.     </html>

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

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>浮动与定位小区别</title>
  6.         <style type="text/css">
  7.             *{
  8.                 margin: 0;
  9.                 padding: 0;
  10.             }
  11.             div{
  12.                 width: 200px;
  13.                 height: 200px;
  14.             }
  15.             .one{
  16.                 /*float: left;*/
  17.                 position: absolute;
  18.                 background: #bfe;
  19.                 margin-top: 40px;
  20.             }
  21.             .two{
  22.                 /*珊瑚色*/
  23.                 background: coral;
  24.             }
  25.         </style>
  26.     </head>
  27.     <body>
  28.         <div class="one"></div>
  29.         <div class="two">相对定位文本流测试</div>
  30.     </body>
  31.     </html>

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

  1.     <!DOCTYPE html>
  2.     <html lang="en">
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.     </head>
  7.     <body>
  8.         <div style="width: 400px;height:200px;background:cyan;">
  9.             <span style="float:left;width: auto;height:100%;background:coral;">
  10.                 <i style="background: #bfe;float: left;width: 100px;">hello world</i>
  11.             </span>
  12.         </div>
  13.     </body>
  14.     </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. mstar 平台I2C 配置

    芯片的pin 脚可以用作不同的功能,总结一句就是外设进行状态和数据交换. 最常用的是作为GPIO,设置为输出模式时,通过高低电平来控制一些外围设置:// 如LED,屏的电源,背光的开关,功放的静音等等 ...

  2. linux驱动由浅入深系列：高通sensor架构实例分析之三(adsp上报数据详解、校准流程详解)【转】

    本文转载自:https://blog.csdn.net/radianceblau/article/details/76180915 本系列导航: linux驱动由浅入深系列:高通sensor架构实例分 ...

  3. git 相关流程和报错解决

    git 相关流程: 预先配置: gitroot $ git config user.name XXXgitroot $ git config user.email XXX@XXX.com git re ...

  4. [转]怎样与 CORS 和 cookie 打交道

    原文地址:https://segmentfault.com/a/1190000018756960 前言 CORS 与 cookie 在前端是个非常重要的问题,不过在大多数情况下,因为前后端的 doma ...

  5. 【翻译】FlinkCEP-Flink的复杂事件处理

    本文翻译自官网:FlinkCEP - Complex event processing for Flink FlinkCEP是在Flink之上实现的复杂事件处理(CEP)库. 它使您可以检测无穷无尽的 ...

  6. VM无法正常使用桥接模式获取IP上网

    问题: 有时候会遇到VM使用桥接模式时无法正常获取IP的情况 原因: 初步怀疑是因为你的电脑是双网卡 解决方法: 这时候,就需要修改VM的虚拟网络编辑器的配置 解决步骤: 编辑->虚拟网络编辑器 ...

  7. 消息中间件 kafka rabbitmq 选型差异

    https://www.zhihu.com/question/43557507 https://baijiahao.baidu.com/s?id=1610644333184173190&wfr ...

  8. 启动Oracle 12c数据库实例

    启动Oracle 12c数据库实例 启动Oracle数据库实例,主要分为两步:第一步,启动监听:第二步,启动数据库实例. 1. 切换到oracle用户- su oracle- cd - source ...

  9. 【Spring Cloud学习之三】负载均衡

    环境 eclipse 4.7 jdk 1.8 Spring Boot 1.5.2 Spring Cloud 1.2 主流的负载均衡技术有nginx.LVS.HAproxy.F5,Spring Clou ...

  10. Docker---数据卷Volume的简单使用（使用DockerFile实现）

    DockerFile是什么?Dockerfile是由一系列命令和参数构成的脚本,这些命令应用于基础镜像并最终创建一个新的镜像.它们简化了从头到尾的流程并极大的简化了部署工作.Dockerfile从FR ...