你的位置:首页 > 网页设计

[网页设计]理解浮动和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属性。