理解浮动和position定位
前言
为了更好理解浮动和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定位的更多相关文章
- 理解浮动和position定位（转）
前言 为了更好理解浮动和position,建议先看看我写的这篇文章<Html文档流和文档对象模型DOM理解> 正文 一.浮动 CSS设计float属性的主要目的,是为了实现文本绕排图片的效 ...
- 浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- (转)浅析CSS——元素重叠及position定位的z-index顺序
多次在项目中遇到html页面元素的非期待重叠错误,多数还是position定位情况下z-index的问题.其实每次解决类似问题思路大致都是一样的,说到底还是对z-index的理解比较模糊,可以解决问题 ...
- 元素重叠及position定位的z-index顺序
元素位置重叠的背景常识 (x)html文档中的元素默认处于普通流(normal flow)中,也就是说其顺序由元素在文档中的先后位置决定,此时一般不会产生重叠(但指定负边距可能产生重叠).当我们用cs ...
- 归纳篇（一）CSS的position定位和float浮动
近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...
- CSS| position定位和float浮动
对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...
- CSS3——分组和嵌套 尺寸 display显示 position定位 overflow float浮动
分组和嵌套 分组选择器 ——————> 嵌套选择器 能适用于选择器内部的选择器的样式 p{ }: 为所有 p 元素指定一个样式. .marked{ }: 为所有 class="m ...
- position定位
CSS盒模型和定位的类型 为了搞清楚定位首先你得了解CSS盒模型.在上一句中的链接是我写在InstantShift 中的一篇关于盒模型的文章.我在那篇文章做了详细的讲解并会在这篇文章中做一个快速的总结 ...
- 解决IE6下浮动层固定定位的经典方法
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
随机推荐
- deviceFilters与设备过滤
本主题是ASP.NET在移动设备上展示的方面的内容 起初看起来deviceFilters与前面的browserCaps类似.同样也会关联到HttpBrowserCapabilities,而在这里用到的 ...
- 【Win10开发】Toast通知——后台激活
前篇文章我们写了关于Toast的前台激活,那么接下来就讲一讲它的后台激活.当通知出现时并不会出现app的界面,但是app能在后台获取到通知中的信息. 关于xaml和Toast通知架构我们在这里就不再赘 ...
- Java关于Properties用法(二)——替换配置文件中的参数
上一章讲了配置文件的基本用法,虽然上一章已经可以解决一些需求,但还不些不足之处.假如,配置文件里面的字符串有一部分需要经常变动,另外一些不需要,上一章的方法就不方便了,所以这章主要讲如何在配置文件中使 ...
- php实现设计模式之 原型模式
<?php /* * 原型模式:通过复制已经存在的对象来创建新对象. * 通过原型实例指定创建对象的种类,并且通过copy这些原型创建信的对象 * 是创建型模式 * 有的时候创建一个对象有很多步 ...
- 【读书笔记】2016.11.19 北航 《GDG 谷歌开发者大会》整理
2016.11.19 周六,我们在 北航参加了<GDG 谷歌开发者大会>,在web专场,聆听了谷歌公司的与会专家的技术分享. 中午免费的午餐,下午精美的下午茶,还有精湛的技术,都是我们队谷 ...
- 【PHP资源】PHP 资源大全
看到这篇文章不错,转来收藏 依赖管理 依赖和包管理库 Composer/Packagist:一个包和依赖管理器 Composer Installers:一个多框架Composer库安装器 Pickle ...
- Code First ：使用Entity. Framework编程(5) ----转发 收藏
第五章 对数据库映射使用默认规则与配置 到目前为止我们已经领略了Code First的默认规则与配置对属性.类间关系的影响.在这两个领域内,Code First不仅影响模型也影响数据库.在这一章,你将 ...
- IE9 IE8 ajax跨域问题的解决
项目中用到的跨域 ,在除IE9以下的浏览器上运行都是没有问题的,IE8 IE9中报错,error :no transport; 网上解决办法均是 在发起请求之前添加 jQuery.support.co ...
- Xcode8开发iOS10推送通知过程
iOS10发布后,简书优先开发增加了iOS10的新通知.本文分享整个feature的开发过程遇到的问题. 1.工程配置 Xcode8发生了很大的变化,直接打开原来的工程编译运行,这个时候是获取不到Pu ...
- 初识java之变量、数据类型和运算符（一）
博友目标: 1.掌握变量的概念 2.引子----会使用常用数据类型 众所周知,每台电脑都有一个内存这么个必不可少的元素,那么到底内存到底是用来干什么的呢?其实啊,计算机内存相当于人类的大脑,计算机在处 ...