前言

  为了更好理解浮动和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. golang 读取 chrome保存的网站账号信息

    package main import ( "database/sql" "fmt" "log" "os" " ...

  2. 将数据写入已有的excel文件

    /** * 将反馈结果写入excel中 * */ public static void writeExcelResult(String url,List<Integer> result) ...

  3. ajax异步请求数据

    源码1: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  4. CharacterEncodingFilter这个spring的过滤器

    org.springframework.web.filter.CharacterEncodingFilter 对请求于响应的编码进行过滤,半路出家的和尚总是对什么都感觉到好奇,都想记录下来(

  5. spring的一些annotation

    通过使用spring的注解可以把一些类通过spring容器管理这些类 @controller 控制器(注入服务) @service 服务(注入dao) @repository dao(实现dao访问) ...

  6. 086-PHP数组按数字排序和按字母排序

    <?php $arr=array(2,54,167,'a','A','12'); //定义一个数组 echo '数组排序之前的信息:<br />'; print_r($arr); / ...

  7. 实验吧-杂项-啦啦啦(数据包http导出、图片拼接)

    比较综合的一道题. 1.数据包数据提取 首先下载数据包,一般数据包都是抓取的一些数据,需要对数据进行分析. 用wireshark打开数据包,筛选出http协议的数据,发现有两个是上传的数据: 我们就看 ...

  8. Bean XML 配置(2)- Bean作用域与生命周期回调方法配置

    系列教程 Spring 框架介绍 Spring 框架模块 Spring开发环境搭建(Eclipse) 创建一个简单的Spring应用 Spring 控制反转容器(Inversion of Contro ...

  9. Redis Sentinel 学习笔记

    转载出处: http://blog.csdn.net/lihao21 概述 Redis Sentinel 是用来实现 Redis 高可用的一套解决方案.Redis Sentinel 由两个部分组成:由 ...

  10. python 将数组中取某一值的元素全部替换为其他元素的方法

    这里的问题是在做House Price Prediction的时候遇到的,尝试对GarageArea做log转化,但是由于有些房子没有车库,所以GarageArea = 0,再通过log转化变成-in ...