对CSS中的Position、Float属性的一些深入探讨

 

对CSS中的Position、Float属性的一些深入探讨

对于Position、Float我们在平时使用上可以说是使用频率非常高的两个CSS属性，对于这两个属性的使用上面可能大多数人存在一些模糊与不清晰的地方。本文主要对这两个属性使用上的一个介绍以及两个属性交叉使用上的一些探讨。

本文主要探讨点：

  1. Position、Float属性的基本使用方法
  2. Position、Float属性对元素所造成的影响
  3. Position、Float属性交叉使用上面的影响
  4. Position、Float属性使用上的小技巧

本文结构点：

  1. HTML布局的基本要点（点我直接跳转）
      盒子模型
      HTML的普通流
  2. Position属性（点我直接跳转）
      属性值介绍
      用法介绍
      一些关于position的小知识
  3. Float属性（点我直接跳转）
      属性值介绍
      用法介绍
      与Position之间的兼容问题

HTML布局的基本要点：

如果要掌握、运用好Position、Float属性必须要对HTML的两个基本点有清晰的了解。

  1. 盒子模型（box model）
  2. HTML的普通流（normal flow）

盒子模型

在HTML中元素的盒子模型分为两种：块状元素、行内元素，请注意这里的块状元素（Block）和行内元素（Inline）与Display属性中的inline、block两个属性值并不等同。盒子模型中的Inline、Block类似于是Display属性的父类，例如：Display属性中的list-item属性值是属于块状（Block）类型的。

我们直观的上看两种盒子模型的区别

  • 块状（Block）类型的元素可以设置width、height属性，而行内（Inline）类型设置无效。
  • 块状（Block）类型的元素会独占一行（直观的说就是会换行显示，无法与其他元素在同一行内显示，除非你主动修改元素的样式），而行内（Inline）类型的元素则都会在一行内显示。
  • 块状（Block）类型的元素的width默认为100%，而行内（Inline）类型的元素则是根据自身的内容及子元素来决定宽度。

列举出一些大家常见的元素的分类

  • 块状元素：P、DIV、UL、LI、DD、DT...
  • 行内元素：A、IMG、SPAN、STRONG...

HTML的普通流

浏览器在读取HTML源代码的时候是根据元素在代码出现的顺序读取，最终元素的呈现方式是依据元素的盒子模型来决定的。行内元素是从左到右，块状元素是从上到下。（如下图）

<style type="text/css">

  div { width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }

  strong { background: #808080; }

  em { background: #ffd800; }

  span { background: #b6ff00; }

</style>

<strong>strong</strong><em>em</em><span>span</span>

<div style="background: blue">A</div>

<div style="background: red">B</div>

<div style="background: green">C</div>

如果你不改变元素的默认样式前提下，元素在HTML的普通流中会“占用”一个位置，而“占用”位置的大小、位置则是由元素的盒子模型来决定。因此，在后续讲的Position、Float属性是否会使元素脱离这个普通流是一个关键点。

Position属性：

我们首先来谈谈Position属性，因为Position属性能够很好的体现HTML普通流这个特征。重点在于应用了不同的position值之后是否有脱离普通流和改变Display属性这两点。

Position属性值

Position的属性值共有四个static、relative、absolute、fixed。

Static

所有元素在默认的情况下position属性均为static，而我们在布局上经常会用到的相对定位和绝对定位常用的属性top、bottom、left、right在position为static的情况下无效。其用法为：在改变了元素的position属性后可以将元素重置为static让其回归到页面默认的普通流中。

Relative

俗称的相对定位，重点在于对相对理解。我们此前说过每个元素在页面的普通流中会有“占用”一个位置，这个位置可以理解为默认位置，而相对定位就是将元素偏离元素的默认位置，但普通流中依然保持着原有的默认位置，并没有脱离普通流，只是视觉上发生的偏移。
我们先用块状元素来做个示例：

<style type="text/css">

div{ width: 100px; height: 50px; line-height: 50px; text-align: center; color: #fff; }

</style>

<div style="background: blue">A</div>

<div style="background: red; position: relative; top: 20px; left: 20px;">B</div>

<div style="background: green">C</div>

右图中的黑色虚线部分为元素B的默认普通流位置，而黄色线则代表元素B的相对偏移量。我们可以很明显的看出在元素C依然还是保留在原位，并没有因为元素B发生了偏移而随之变化。

我们再来看看行内元素（在这里用大家最常用的span来做示例）

<style type="text/css">

strong { background: #808080; }

em { background: #ffd800; }

span { background: #b6ff00; position: relative; top: 10px; left: 10px; width: 100px; }

</style>

<strong>strong</strong><em>em</em><span>span</span>

请注意看，在这里我是有对span进行width属性的赋值（为100px）。但是我们可以看到span在运用了relative这个position属性值后，依然对width属性无效，换而言之，position: relative并没有改变行内元素的Display属性，这个概念非常重要（注意与接下来的absolute的区别）。

Absolute

俗称的绝对定位，绝对定位是相对而言的，怎么理解呢？应用了position: absolute的元素会循着节点树中的父（祖）元素来确定“根”，然后相对这个“根”元素来偏移。如果在其节点树中所有父（祖）元素都没有设置position属性值为relative或者absolute则该元素最终将对body进行位置偏移。应用了position: absolute的元素会脱离页面中的普通流并改变Display属性（重点）！

我们先用一个默认嵌套的DIV来做示例

<body style="background: yellow;">

    <div style="background: #fff">

        A

        <div style="background: #81b6ff">

            A - 1

            <div style="background: #b6ff00;">

                A - 2

            </div>

        </div>

    </div>

</body>

现在我们对A-2这个div设置绝对定位(Top: 0, Left: 0)，而没有对它的父元素（A、A-1）设置任何的position值

<body style="background: yellow;">

    <div style="background: #fff">A

        <div style="background: #81b6ff">A - 1

            <div style="background: #b6ff00; position: absolute; top: 0; left: 0;">

                A - 2</div></div></div></body>

可以看到（A-2）最终是根据body来产生了位移，让我们对比分别设置一下父元素position。

从上面的图，我们可以总结以下几个结论。

1）块状元素在position(relative/static)的情况下width为100%，但是设置了position: absolute之后，会将width变成auto（会受到父元素的宽度影响）。

2）元素设置了position: absolute之后，如果没有设置top、bottom、left、right属性的话，浏览器会默认设置成auto，而auto的值则是该元素的“默认位置”。即设置position: absolute前后的offsetTop和offsetLeft属性值不变。
特殊情况：

  • Firefox的话会直接将top、left设置成offsetTop和offsetLeft的值而非auto。
  • IE7下的表现更类似于float，会附加到父元素的末尾。

一些的position小知识

1）应用了position: relative/absolute的元素，margin属性仍然有效，以position:relative来举例。如果设置了left、top、bottom、right的属性，建议大家不要设置margin数据，因为很难精确元素的定位，尽量减少干扰因素。

2）position: absolute忽略根元素的padding。

<div id="a" style="background: #fff; width: 200px;">A

    <div id="b" style="background: #81b6ff; width: 150px; position: relative; padding-top: 100px;">A - 1

        <div id="c" style="background: #b6ff00; position: absolute; left: 0; top: 0">A - 2

        </div>

    </div>

</div>

3）在IE6/7中设置position属性后会导致z-index属性失效

<!-- 解决方案，父元素设置一个更大的z-index值即可 -->

<div style="z-index: 2;">

  a

    <div style="position: relative; z-index: 1;">

      b

    </div>

</div>

4）行内元素在应用了position：absolute之后会改变display。

<span style="position: absolute; width: 100px; height: 100px; top: 10px; left: 10px; background: #fff;">

        我的display属性由inline变成了block

</span>


因此，要注意到relative是并没有改变行内元素的呈现模式，而absolute是会改变行内元素的呈现模式，如果设置了absolute并不需要显式的的将元素display改成block。

5）应用了position: absolute / relative之后，会覆盖其他非定位元素（即position为static的元素），如果你不想覆盖到其他元素，也可以将z-index设置成-1。

Fixed

在很长的时间里，这个属性值因为兼容性问题，并没有得到非常广泛的应用（IE6未实现该属性值）。fixed和absolute有很多共同点：

  1. 会改变行内元素的呈现模式，使display之变更为block。
  2. 会让元素脱离普通流，不占据空间。
  3. 默认会覆盖到非定位元素上。

fixed与absolute最大的区别在于：absolute的”根元素“是可以被设置的，而fixed则其”根元素“固定为浏览器窗口。即当你滚动网页，其元素与浏览器窗口之间的距离是恒定不变的。

Float属性

float的属性值有none、left、right，有几个要点：

  1. 只有横向浮动，并没有纵向浮动。
  2. 当元素应用了float属性后，将会脱离普通流，其容器（父）元素将得不到脱离普通流的子元素高度。
  3. 会将元素的display属性变更为block。
  4. 浮动元素的后一个元素会围绕着浮动元素（典型运用是文字围绕图片），与应用了position的元素相比浮动元素并不会遮盖后一个元素。
  5. 浮动元素的前一个元素不会受到任何影响（如果你想让两个块状元素并排显示，必须让两个块状元素都应用float）。

与position的兼容性问题

1）元素同时应用了position: relative、float、（top / left / bottom / right）属性后，则元素先浮动到相应的位置，然后再根据（top / left / bottom / right）所设置的距离来发生偏移。

<div style="position:relative; float:right; left:50px; top:10px;">div</div>

左图中的div是没有设置top、left值的，而右边则设置了50px的偏移。

2）元素同时应用了position: absolute及float属性，则float失效。

<div style="position: absolute; right:10px; top: 10px; float: left;">

我是一个应用了position：absolute和float：left的DIV，不过我还是在浏览器的右边，没有浮动到左边。

</div>


3）第一个元素应用了position之后会覆盖着接下来的float元素（如果两个元素所处的位置相同）

<div style="position: absolute; left:10px; top: 10px;">

    我是一个应用了position：absolute的DIV。

</div>

<div style="float:left; background: red; width: 300px; height: 150px; ">

    我是float：left的DIV

</div>

回顾：如果你不将float的元素的position设置成relative的话，你想通过设置float元素的z-index来的达到覆盖position:absolute是无效的。同理，float元素下面存在position: absolute的子元素，如果你不将float的元素的position设置成relative的话，absolute元素是不会定位到float元素的。

4）同时应用position: absolute和float: left会导致清除浮动无效（position: relative则可以清除浮动）。
常用的清除浮动的方法有两种：

  1. 通过在容器中添加一个标签，设置该标签的样式为 clear: both
  2. 容器设置overflow: hidden
<div style="background: #fff; width: 100%; overflow: hidden;">

    <div style="float: left; position: absolute;">我是DIV</div>

    <div style="clear: both;"></div>

<div>

装载：对CSS中的Position、Float属性的一些深入探讨的更多相关文章

  1. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  2. 对CSS中的Position、Float属性的一些深入探讨

    对CSS中的Position.Float属性的一些深入探讨 对于Position.Float我们在平时使用上可以说是使用频率非常高的两个CSS属性,对于这两个属性的使用上面可能大多数人存在一些模糊与不 ...

  3. CSS 中，用 float 和 position 的区别是什么？

    CSS 中,用 float 和 position 的区别是什么? 呃,其实这个命题有误,只有position才是定位,float不能说是定位,不过你可以说这两种布局方式有什么不同.float和posi ...

  4. Css中的Position属性

    Css中的Position属性 Css属性在线查询地址: http://www.css88.com/book/css/properties/index.htm CSS 中的 position 属性 在 ...

  5. 理解css中的position属性

    理解css中的position 两种类型的定位 static类型:只有一个值position: static.position默认值 relative类型:包括三个值,这三个值会相互影响,允许你以特定 ...

  6. css3系列-2.css中常见的样式属性和值

    css3系列-2.css中常见的样式属性和值 继续上一篇文章的继续了解css的基础知识,关注我微信公众号:全栈学习笔记 css中常见的样式属性和值 字体与颜色 背景属性 文本属性 边框属性 内外边距 ...

  7. 关于css中的position定位

    希望这波position可以有帮助^_^! css中的position属性主要分为:static.relative.absolute.fixed.center.page.sticky(红色是css3中 ...

  8. CSS中具有继承性的属性：

    CSS中具有继承性的属性:   color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo ...

  9. 妙味css3课程---1-1、css中自定义属性可以用属性选择器么

    妙味css3课程---1-1.css中自定义属性可以用属性选择器么 一.总结 一句话总结:可以的. 1.如何实现用属性选择器实现a标签根据href里面含有的字段选择背景图片? p a[href*=te ...

随机推荐

  1. Linux命令学习---目录

    一.文件相关命令 1.文件显示 1)tail,head,more,less,cat,nl

  2. 一、MongoDB的下载、安装与部署

    1.什么是MongoDB? 它是介于关系型数据库和非关系型数据库之间的一种NoSQL数据库,用C++编写,是一款集敏捷性.可伸缩性.扩展性于一身的高性能的面向文档的通用数据库. 2.为什么要用Mong ...

  3. BGP学习笔记

    源自红茶三杯: BGP应用于大规模网络或运营商,用作在AS间传递路由信息 使用BGP的三大理由 1. 大量路由需要承载, IGP只能容纳千条,而BGP可以容纳上万(应该是IGP结合BGP使用?) 2. ...

  4. 学习jQuery在表单信息修改之中的常用方法；

    submitHandler: function (form) { var parm = $("#myform").serialize(); var url = $("#m ...

  5. spark概论

    一.概述 1.轻:(1)采用语言简洁的scala编写:(2)利用了hadoop和mesos的基础设施   2.快:spark的内存计算.数据本地性和传输优化.调度优化,使其在迭代机器学习,ad-hoc ...

  6. asp.net中两款文本编辑器NicEdit和Kindeditor

    过Web开发的朋友相信都使用过富文本编辑器,比较出名的CuteEditor和CKEditor很多人应该已经使用过,在功能强大的同时需要加载的东西也变得很多.下面要推荐的两款富文本编辑器都是使用JS编写 ...

  7. 自适应游标共享技术02(一个简单的例子来走近ACS)

    为了不让其他因素干扰实验,参数设置如下: optimizer_mode=ALL_ROWS(使用CBO) optimizer_features_enable=11.2.0.3(使用最新的优化参数) op ...

  8. AngularJs记录学习03

    AngularJs的路由是一个组件,需要自己额外添加,在目录/src/ngRoute中 三个文件route.js,routeParams.js,ngView.js <html> <h ...

  9. Java 打印金字塔 or 打印带数字的金字塔 （Java 学习中的小记录）

    Java 打印金字塔 or 打印带数字的金字塔 (Java 学习中的小记录) 作者:王可利(Star·星星) 效果图: 代码如下: class Star8 { public static void m ...

  10. golang的{}初始化

    之前说到Golang中某些类型可以赋值nil, 某些类型不能赋值nil. 不能赋值nil都是initialized value不为nil的类型, 例如: bool int, intN uint, ui ...