理解浮动和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

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

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

　　(四)fixed

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

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