网页开发中布局是一个永恒的话题。巧妙的布局会让网页具有良好的适应性和扩展性。css的布局主要涉及两个属性——position和float。它们俩看上去很容易被弄混，可是仔细分析一下，它们的区别还是很明显的。下面和大家分享一下我的学习心得。

首先，先介绍一个很重要的概念“文档流”，明白了这个概念之后就很容易理解position和float的定位原理了。

在css中有一个z-index属性，因为网页是“立体的”，它有z轴，这个z轴的大小就由z-index控制。默认情况下，所有页面元素均位于z-index:0这一层，而这一层顺序排列的元素就构成了“文档流”。无论是position还是float，它们都是通过改变文档流来实现定位。

css有三种基本的定位机制：文档流、浮动和绝对定位。除非专门指定，否则所有元素都在文档流中定位。也就是说，文档流中的元素的位置由元素在 X(HTML) 中的位置决定。css定位的基本思想很简单，它允许你使得元素相对于其正常应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置来进行定位。

下面介绍position和float的定位原理。

（一）float：

float属性定位的元素位于z-index:0层。它是通过float:left和float:right来控制元素在0层左浮或右浮。float会改变正常的文档流排列，影响到周围元素。float元素在文档流中一个挨一个排列。但注意，只是float元素之间一个挨一个排列，对于非float的元素，float元素是视而不见的，会越过它们。

如下面的一段代码：

<html>

<head>

<style type="text/css">

    .fl{float:left;background:red;border:solid 1px #00f;}

    .nfl{background:#ff0;border:solid 1px #000;}

</style>

</head>

<body>

    <span class="fl">我是float元素1</span>

    <span class="nfl">我是非float元素</span>

    <span class="fl">我是float元素2</span>

    <span class="fl">我是float元素3</span>

</body>

</html>

　　

1、2、3三个元素是float的，它们会越过非float元素一个挨一个排列，把非float元素挤到最后了。效果如下图：

概括来说，float:left时，会把非float元素挤到所有float元素的右边，float:right时是挤到左边。

（二）position：

position属性包括下面四个值：

  1. static（默认）
    • 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
  2. relative
    • 元素框偏移某个距离。元素仍保持其未定位前的框的形状，它原本所占的空间仍保留。
  3. absolute
    • 元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
  4. fixed
    • 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。

设置absolute或relative会让z-index的值大于0。不同的是，absolute完全脱离文档流，不再在z-index中保留占位符，而relative虽然自己已浮起来，但仍然会保留自己在z-index:0中的位置，因此relative在z-index:0层中的相邻元素不会因此受到影响。下面是具体用法。

1. 静态（static）：

元素顺序显示，在一个文档流中，一个挨着一个，但是不像relative那样可以设置top之类的。静态定位仅仅意味着内容遵循正常从上到下的HTML流。

2. 相对(relative)：

一个相对定位的元素相对它在HTML流中的当前位置而放置。移动一个带有相对定位的元素，在该元素本该放置的地方留下了一个“洞”。相对定位的主要用处不是移动一个元素，而是给行内在它内部的绝对定位的元素设定一个新的参考点。

position: relative的元素相对于自己本来应该在的位置进行偏移，偏移后的位置可能覆盖别人（是漂浮在上方）。它原来的位置也空着，因为它会被加入到文档流中。

3. 绝对(absolute)：

绝对定位让你通过以pixel、em、percentage来指定一个左、右、上或者下的位置来确定一个元素的位置。此外，绝对定位的元素被完全与页面流分离，换句话说，网页上的其他东西甚至不知道这个绝对定位的元素的存在。

absolute定位的一般用法：

  • 如果一个标签有一个绝对的位置，并且它不在任何其他应用了absolute、relative或者fixed定位的标签里面，那么它是相对于页面（body元素）进行定位的。
  • 如果一个标签处在另一个带有absolute、relative或者fixed定位的标签里面，那么它是相对于该元素的边界进行定位的。

即，position: absolute的元素在static的父元素中是相对页面（不是浏览器窗口）进行偏移，在非static父元素中（通常是relative，因为如果父元素是absolute，那父元素还要向上找非static祖先元素）是相对父元素进行偏移。

4. 固定(fixed)：

一个固定的元素被锁定在屏幕的位置上。fixed是相对浏览器窗口的固定位置定位，如网页中的“回到顶部”按钮。

注意：不要试图给同一个样式既应用float属性又应用任何一种定位，除了静态或者相对定位之外。浮动和绝对或者固定定位不可能同时作用在同一个元素上。

--------------------------------

补充:http://www.barelyfitz.com/screencast/html-training/css/positioning/

网页布局:float与position的区别的更多相关文章

  1. 网页布局——float浮动布局

    我的主要参考资料是[Object object]的文章 float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下 首先,什么是浮动? 浮动元素是脱离文档流的,但不脱离 ...

  2. [CSS属性设置，盒子模型，网页布局]

    [CSS属性设置,盒子模型,网页布局] CSS属性设置 1. 宽和高 width:属性可以为元素设置宽度. height:属性可以为元素设置高度. 块级标签的宽度不修改的情况下默认占浏览器的一整行,块 ...

  3. CSS 盒子模型及 float 和 position

    ## CSS和模型 ##CSS盒模型本质上是一个盒子,封装周围的 HTML 元素,包括 外边距(marign),边框(border),填充(padding),内容物(content) 盒子模型的类型: ...

  4. CSS：布局的三个关键属性：float、position、display

    最近在出差,就我一个在这里.客户要做几个页面,涉及到了页面的布局问题,没办法自己得做了.然后就遇到了一些问题.页面不论怎么都不能按照设想的布局. 以前也没有做过网页布局方面的工作.上网上找类似的例子, ...

  5. CSS传统布局之display属性+float属性+position属性

    这三个属性是传统网页布局中经常用到的属性. 读这篇文章之前,希望你对css布局模型已经有了一定的了解.因为本文的三个属性是和css三个布局模型紧密联系在一起的.因此,如若你并不了解,我推荐你先看一下c ...

  6. 常见div+css网页布局（float,absolute）

    网页布局-常见 1,           float布局 (1)常规方法 <div id="warp">     <div id="column&quo ...

  7. float和position:absolute脱离文本流的区别

    float和position:absolute脱离文本流的区别原创 paediatrician 最后发布于2016-09-19 10:43:05 阅读数 5375 收藏展开 文档流:将窗体自上而下分成 ...

  8. CSS布局模型学习(Float、Position、Flexbox)

    一.Floatfloat 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 清除浮 ...

  9. float与position间的区别

    float与position间的区别:    个人理解为:脱离文档流不一定脱离文本流:但脱离文本流,则也脱离文档流.[如有更好的理解还望评论区一起探讨,共同学习进步]一.float 浮动(脱离文档流, ...

随机推荐

  1. 学习macos常用的一些快捷键笔记

    学习mac 操作系统使用笔记 Dock功能学习 类似快捷图标一样 Command+q quit a program Dock上添加与删除都用拖动 command+delete 删除文件 shift+c ...

  2. JNDI绑定数据库

    经过3个多小时的努力,配置JNDI数据源(主要是通过DBCP连接池)终于搞定- 还是Tomcat官方的说明好,不过全是英文的,大概还看得懂． 百度上那么花花绿绿的太多了,一个也没成功!．．． 本例使用 ...

  3. DOJO 如何清空表单

          在Dojo里,清空表单非常简单 在设置好了相关的环境之后,只要设置dom.byId('formid').reset(); / dijit.byId('formid').reset; Jqu ...

  4. ArcEngine 通过IRelationalOperator.Relation判断几何体相交

    IRelationalOperator 接口: 1. Provides access to members that determine if a certain spatial relationsh ...

  5. Android intent-filter 简单用法

    对电话拨号盘的过滤,mainfest配置文件中Activity如下配置: <activity Android:name=".TestActivity" android:lab ...

  6. 细雨学习笔记：JMeter 的主要测试组件总结

    1. 测试计划是使用 JMeter 进行测试的起点,它是其它 JMeter 测试元件的容器. 2. 线程组代表一定数量的并发用户,它可以用来模拟并发用户发送请求.实际的请求内容在Sampler中定义, ...

  7. Linux基本命令（8）网络操作的命令

    网络操作命令 命令 功能 命令 功能 ftp 传送文件 telnet 远端登陆 bye 结束连线并结束程序 rlogin 远端登入 ping 检测主机 netstat 显示网络状态 8.1 ftp命令 ...

  8. 一致性Hash算法在Memcached中的应用

    前言 大家应该都知道Memcached要想实现分布式只能在客户端来完成,目前比较流行的是通过一致性hash算法来实现.常规的方法是将server的hash值与server的总台数进行求余,即hash% ...

  9. 关于python中的unicode字符串的使用

    基于python2.7中的字符串: unicode-->编码encode('utf-8')-->写入文件 读出文件-->解码decode('utf-8')-->unicode ...

  10. extern "c" 的作用

    作用:实现C和C++混合编程. 原理:C和C++编译器编译之后,函数名会编译成不同的名字,链接阶段名字查找会找不到目标,后面实例中会详解. 用法:①.c文件中定义的函数,.cpp文件要调用时,该.cp ...