CSS定位与浮动

定位是对元素进行定位。定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。浮动不完全是定位，不过，它当然也不是正常流布局。

一切标签都是框：div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。

普通流,CSS有三种基本的定位机制，普通流，浮动和绝对定位。除非专门指定，否则所有框都在普通流中定位。也就是说，普通流中的元素的位置由元素在 (X)HTML 中的位置决定，它也叫文档流吧。

display 属性规定元素应该生成的框的类型。这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。默认值是inline，此元素前后会被显示为内联元素，元素前后没有换行符。

position 属性规定元素的定位类型。可能的值有absolute，fixed，relative，static。默认值为static，没有定位，元素出现在正常的流中。这里会忽略top, bottom, left, right 或者 z-index 声明。（下面讲到不忽略的）

固定定位fixed表示生成绝对定位的元素，相对于浏览器窗口进行定位，元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。下同，不过下面的用的广一下咯。

相对定位relative，在原来的文档中，一个元素框本来应该出现的位置为原始位置，现在在原始位置的基础上进行移动，这种移动就叫做相对定位。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

上面代码表示在原来的框的基础上向下移动20像素，向右移动30像素。相对定位是在文档流之中的，因为它必须先知道在文档流之中属于它的位置然后再进行移动的。它的移动如果跟别的内容重合，那么肯定会覆盖别的内容的。

绝对定位absolute，它不在原来的文档流之中，因此不占据空间。绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置z-index属性来控制这些框的堆放次序。大致的意思是它的位置相对于它的父亲元素框。在父亲元素框内进行绝对定位。这里可以控制堆放次序，还是因为它与原来的文档流是无关的，与父亲元素框里的其他子元素属于不同的次元，所以设置优先级就会决定谁可以覆盖谁。

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

浮动float属性，实现了元素的浮动，float 属性定义元素在哪个方向（左或者右，尽可能往上挤）浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。可能的值有left元素向左浮动，right元素向右浮动，默认是none，元素不浮动，会出现在它应该出现的位置。这个浮动不是飘来飘去，显示的是直接浮动过去之后的样子。如果把一个列表的每一行元素都设置为向左浮动，那么它们可能会处在同一行之中，这就可以做出水平的菜单栏，当然如果浏览器变小了，它们水平装不下了，就会进入下一行，直到有足够的空间，因为无法容纳水平排列的多个浮动元素。如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素“卡住”。这很像玩固定的积木在一个框框里按住他往左移动。（水平移动的俄罗斯方块）

行框，如果是不浮动的框，那么文字是不包围图片的，在图片的下面另起一行就是了，因此图片右边可能出现一片空白。如果是浮动的框，就会把这片空白给填补上来，那么这意味着浮动框旁边的行框是被缩短了的，因为它给浮动框留出了空间。行框围绕浮动框。这里浮动框也不在文档的普通流之中，但不会产生覆盖，因为它成为了一个新的块级元素，与父亲元素之内的别的子元素框互动。那么问题来了，如果要阻止行框围绕浮动框，要那一片空白该怎么办？

clear 属性规定元素的哪一侧不允许其他浮动元素。默认值是none，允许这样做。其他可能的值为left，right，both表示不允许哪边的浮动元素存在。

img
  {
  float:left;
  clear:both;
  }

上面的表示如果有两个小图片都向左浮动，一般的话就可以在同一行显示了，除非页面特别小了，但是上面clear属性说明了不允许别的浮动框在同一行，所以他们就变成了两行了。那么问题就可以解决了，我们用clear属性，把文字段也设置成为浮动元素，那么它们就不会出现围绕现象了。还可以有别的选择，比如两个向左浮动的元素，这样下面就会有一大片空白。挺好用。
上面会出现一个问题，就是如果在一个父元素中的所有孩子元素全部都是浮动元素。因为浮动元素脱离了文档流，它们不占据空间，于是，父元素就变成了一个空的元素，而且这个元素并没有包围浮动元素，而会出现在浮动元素的上方。如何让包围元素在视觉上包围浮动元素呢？需要在这个元素中的某个地方应用 clear进行清理，但问题是没有现有的元素可以应用清理属性。此时我们在父元素内再添加一个空的元素，元素用清理属性就可以了。

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

如上面的代码，在父元素框里加一个没有内容的<div>元素框，这个元素实行清理，这就实现了父元素包围了浮动元素。但是这需要添加多余的代码。常常有元素可以应用 clear，但是有时候不得不为了进行布局而添加无意义的标记。

另外还有另一种方法，那就是这个父元素框也是浮动框，这就可以了。但问题是下一个元素会受到这个父浮动元素的影响。在这个基础上怎么解决问题呢？那就是所有的布局东西全进行浮动，然后使用适当的有意义的元素（常常是站点的页脚）对这些浮动进行清理。这有助于减少和消除不必要的标记。（常用方法）

补充：

img 
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}

clip属性可以切剪元素，这里切剪的是矩形rect，里面的四个参数是上，水平，垂直，下的截取长度。

img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}

z-index属性是设置优先级的，默认的z-index是0。-1是拥有更低的优先级，这样图片就会放在底层，看起来像是背景图片。如果改成z-index=1，那么图片就会覆盖下面的文字了。