网页开发中布局是一个永恒的话题。巧妙的布局会让网页具有良好的适应性和扩展性。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. nodejs开发阶段利器supervisor

    在开始学习nodejs时,往往一般写代码,一边看效果.先停止node,再重新运行.非常耗时. 这时supervisor派上了用场. 安装 推荐使用npm,本人一直使用局部安装,这样可以将全部文件安装在 ...

  2. 项目中使用的ajax异步读取数据结构设计

    设计稍微复杂了一点,完成ajax读取功能涉及到了很多页面.虽然如此,但感觉比较灵活. 和传统方法唯一的区别在于多了一层数据容器控件,里面提供了显示数据的HTML元素及相应的JS方法. 这样数据控件指生 ...

  3. 为什么要用Java泛型

    啥是泛型? 泛型(generic)是指参数化类型的能力.可以定义带泛型类型的类或方法,随后编译器会用具体的类型来代替它. 举个栗子 上述代码在编译期没有问题,但在运行期,将会报错.就是因为List的a ...

  4. memcache保存php的session 解决多服务器的session问题

    PECL :: Package :: memcache 2.1.1 版本的 Changelog 中有一条: - Added experimental session storage support. ...

  5. PV是什么意思

    现在国内的站点都号称自己能统计pv,不过听我讲完pv到底是什么,估计所有的站长都要笑了.     pv的意思,就是一个访问者在24小时(0点到24点)内到底看了你网站几个页面.     不过在国内,由 ...

  6. MYSQL性能查看（命中率,慢查询)

    网上有很多的文章教怎么配置MySQL服务器,但考虑到服务器硬件配置的不同,具体应用的差别,那些文章的做法只能作为初步设置参考,我们需要根据自己的情况进行配置优化,好的做法是MySQL服务器稳定运行了一 ...

  7. Net判断一个对象是否为数值类型 z

    http://www.cnblogs.com/SkyD/p/4053461.html public static bool IsNumeric(this Type dataType) { if (da ...

  8. delphi 中 $是什么意思 串口中使用

    delphi 中 $是什么意思? 比如:$41----$5A 意识是26个字母, 可以用$来表示? $在delphi 中还可以怎么用?1.表示16进制,$41就是65,第一个字母的ASCII值 pro ...

  9. reCAPTCHA 简单分析

    CAPTCHA项目是Completely Automated Public Turing Test to Tell Computers and Humans Apart (全自动区分计算机和人类的图灵 ...

  10. SSD Cloud Hosting–Linode-Mysql数据库的安装与配置

    接着上一篇的话题:SSD Cloud Hosting - Linode的配置和部署,搭建Java环境 8.Mysql数据库的安装与配置 安装 检查yum里边有没有mysql: yum list|gre ...