前言

  为了更好理解浮动和position,建议先看看我写的这篇文章《Html文档流和文档对象模型DOM理解》

正文

  一、浮动

  CSS设计float属性的主要目的,是为了实现文本绕排图片的效果。然而,这个属性居然也成了创建多栏布局最简单的方式。

  如何浮动一个元素?先设定其宽度width,再增加样式规则float:left/right。

  //注意:该浮动元素已从正常文档流中删除。浮动元素是被块级元素忽略的元素,但是内联元素知道它们在哪里,内联元素会留意浮动元素的边界,而块元素会正常流向页面。

  提到浮动,就得提清除浮动clear。如下图:

  

  因为块级元素不知道左侧浮动元素的存在(浮动元素不在文档流中),所以块级元素会铺满整个区域。可以用元素的CSS  clear属性来提出请求:当元素流入页面时,在这个元素的左边、右边或两边不允许有浮动内容。

  

  添加样式clear:left;  这样,块级元素就会在浮动元素的下面了。

  想了解更多浮动的知识,请看例子。《围住浮动元素的三种方法》

   二、position

  position属性有4个值:static、relative、absolute、fixed。

  (一)static

  HTML元素的默认值,即没有定位,元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响。

  (二)relative

  相对的是元素原来在文档流中的位置(或者默认位置)。相对定位会让元素正常地流入页面,不过在页面上显示之前要进行偏移。

  //注意:这个元素原来占据的空间保留着,其他元素没改变位置。相对定位元素经常被用来作为绝对定位元素的容器块。

  (三)absolute

  绝对定位会把元素从文档流中删除,块元素和内联元素都不知道它的存在,绝对定位的元素的定位上下文是最近的已定位父元素,其默认的定位上下文<body>元素。

  //绝对定位元素的任何祖先元素都可以成为它的定位上下文,只要把相应祖先元素的position设定为relative/fixed即可。

  (四)fixed

  固定定位会把元素从文档流中删除,块元素和内联元素都不知道它的存在,其定位上下文是视窗口。

  ps:relative、absolute、fixed有z-index属性。

理解浮动和position定位(转)的更多相关文章

  1. 理解浮动和position定位

    前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...

  2. 浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  3. (转)浅析CSS——元素重叠及position定位的z-index顺序

    多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...

  4. 元素重叠及position定位的z-index顺序

    元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...

  5. 归纳篇(一)CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  6. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  7. CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动

    分组和嵌套  分组选择器 ——————>   嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...

  8. position定位

    CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...

  9. 解决IE6下浮动层固定定位的经典方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

随机推荐

  1. linux扩容空间,再扩容文件系统

    Linux磁盘空间进行扩容 参考博客 http://blog.csdn.net/dingchenxixi/article/details/50986472 http://blog.sina.com.c ...

  2. Exchange Server备份与恢复

    本文档描述了Exchange 2003.Exchange Server 2007/2010的备份与恢复操作,涉及的内容包括: 1.使用NTBackup 备份与恢复Exchange 2007/2003 ...

  3. 【转载】redis.windows.conf 参数说明

    1. Redis默认不是以守护进程的方式运行,可以通过该配置项修改,使用yes启用守护进程 daemonize no 2. 当Redis以守护进程方式运行时,Redis默认会把pid写入/var/ru ...

  4. 130-PHP子类通过类函数访问父类protected修饰的类成员

    <?php class father{ //定义father类 //定义protected修饰的成员属性和方法 protected $money=1000000; protected funct ...

  5. 120-PHP调用成员方法并将不同类的对象做为参数

    <?php class ourself{ //定义自己人类 private $birthday='1990-12-20'; //定义private修饰的成员属性 public function ...

  6. hdu 1160 上升序列 dp

    FatMouse's Speed Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  7. Day 18:SequenceInputStream、合并切割mp3、对象输入输出流对象

    SequenceInputStream用例题讲述用法 需求:1.把a.txt与b.txt 文件的内容合并 2.把a.txt与b.txt .c.txt文件的内容合并 import java.io.Fil ...

  8. HDU 5461:Largest Point

    Largest Point Time Limit: 1500/1000 MS (Java/Others)    Memory Limit: 65535/32768 K (Java/Others) To ...

  9. 全面介绍Windows内存管理机制及C++内存分配实例

    转自:http://blog.csdn.net/yeming81/article/details/2046193 本文基本上是windows via c/c++上的内容,笔记做得不错.. 本文背景: ...

  10. 16 ~ express ~ 添加博客分类

    一,创建表结构  /schemas/categories.js var mongoose = require('mongoose')   module.exports = new mongoose.S ...