前言

　　为了更好理解浮动和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. 修改tomcat的字符集问题

    转 默认情况下,tomcat使用的是iso8859-1的编码编码方式,浏览器的embed标签中src指向的地址要通过tomcat去解析.如果包含中文,采用这种编码方式就会出现乱码问题,而在这种情况下, ...

  2. JPA#实体属性转换器

    __震惊,一下内容竟然是空白 用途 (自动转换数据库字段和实体属性间的最佳取值): - 1. POJO持久化到数据库表中的时候,对某些特殊属性处理后,用处理过的值作为数据库字段的值. 2. 从数据库查 ...

  3. Vulkan SDK之Vertex Buffer

    A vertex buffer is a CPU-visible and GPU-visible buffer that contains the vertex data that describes ...

  4. 153-PHP htmlentities函数

    <?php //定义一个HTML代码字符串 $str=<<<HTM <a href=#><b><i>到一个网址的链接</i>&l ...

  5. HDU 4952 Number Transformation 多校8 机智数学

    哎.这个题想了好久,状态不对啊...一个大家都出的题..当时想到肯定是可以有什么规律来暴力,不用算到10的10次方 对于某个k,x.从1到k循环,每次求一个新的x,这个x要大于等于原x,并且要是i的倍 ...

  6. .NET via C#笔记5——基元类型，引用类型和值类型

    5 基元类型,引用类型和值类型 5.3 值类型的装箱和拆箱 将值类型转化为引用类型需要进行装箱(boxing) 赋值,传参等操作,如果从值类型转为引用类型,都会进行装箱 装箱的代价比较大 申请一块堆内 ...

  7. oracle函数创建与调用

    函数的定义: CREATE OR REPLACE FUNCTION FUNCTION_TEST(PARAMER1 IN VARCHAR, -- 参数的类型不写长度 PARAMER2 OUT VARCH ...

  8. wireshark封包详细信息详解（10.15 第二十一天）

    wireshark:网络流量抓取分析神器,需要学习一些常用的数据包过滤规则 IP过滤 ip.addr==192.168.1.1 只要包中的IP有192.168.1.1的,就会提取过来 IP源地址:ip ...

  9. 【Vue中的坑】路由相同参数不同无法触发路由

    场景: vue实现导航栏,二级导航栏跳转到相同页面,通过参数来实现到该页面后,根据参数来滚动到对应到位置 网上的解决方法: 通常情况下我们喜欢设置keepAlive 包裹 router-view &l ...

  10. NVIDIA TX2--3--NVIDIA Jetson TX2 查看系统版本参数状态及重要指令

    NVIDIA Jetson TX2 查看系统参数状态. 当前博主的TX2更新的版本为:Jetpack 3.3, cuda 9.0.252, cudnn7.0, opencv3.3.1, TensorR ...