重看css权威指南 part8

  这节介绍两个很重要的内容：浮动和定位

  浮动的布局规则

  浮动在早期主要用于图片，图片时替换元素。当我们为一个非替换元素使用浮动时，最好给他定义一个width。否则浮动后元素的宽度可能会趋于0。关于浮动的另一个有意思的情况，浮动元素的外边距和周围元素的外边距不会合并。此外，浮动元素会生成一个块级框，相当于display:block。

  在深入讨论浮动之前，首先要建立包含块的概念。浮动元素的包含块是其最近的块级祖先元素。有一些特定规则控制着浮动元素的摆放

1.浮动元素的左右外边界不能超过其包含块的内边界。一个浮动元素的顶端不能比他的父元素内顶端更高。当一个浮动元素被夹在两个外边距之间时，会假设它外边有一个块级父元素。(外边界指元素框的边界，包含margin，内边界指width的边界，不包括padding部分)

关于第一点，我们知道把元素浮动后父元素可能会塌陷，因为浮动后的元素脱离了正常文档流，所以父元素的高度会变为没有该子元素时的高度。

2.后面的所有规则都是为了保证浮动元素彼此之间不会覆盖。其中一个比较有意思的，浮动元素的顶端不能超过它上一个浮动元素的顶端。

利用负外边距可以使浮动元素的边界超出父元素的边界，也可以使浮动元素的内容覆盖其他内容。当浮动元素的内容和正常流中的元素内容重叠时。行内元素会完全覆盖浮动元素的内容(包括背景，边框)另一方面，块级元素只是将其内容显示在浮动元素之上，背景和边框都在浮动元素之下。

浮动的清除

属性名：clear

值：left | right | both | none | inherit

应用于：块级元素

继承性：无

该属性会确保元素的指定方向没有浮动元素。

定位

定位的情况要复杂很多，先笼统地介绍一下定位的属性和他们的值。

属性名：position

值：static | relatice | absolute | fixed | inherit

初始值：static

应用于：所有元素

继承性：无

对元素使用absolute定位后会生成一个块级框，相当于display:block。fixed类似于absolute，不过他的包含块始终为视窗本身。

包含块的含义是定位上下文，对于relative和static定位的元素，包含块由最近的块级或行内块祖先的内容边界构成。对于absolute，包含块是最近的position不为static的祖先元素。

偏移属性

属性名：top，right，bottom，left

值：长度或百分数，auto，inherit

初始值：auto

继承性：无

百分数：相对于包含块的高度或宽度

偏移属性表示定位元素相对于包含块的偏移长度。

对于absolute定位的元素，我们知道一个有用的公式后就能很好的理解它的大小和位置。(由于top，left，right，left可以为auto)。right+margin-right+border-right+padding-right+width+padding-left+border-left+margin-left+left=包含块width。垂直方向上情况类似。

因此，对于absolute定位的元素，可以这样让他水平居中或垂直居中：

div{position:absolute;left:0;right:0;width:20%;height:20%;margin:0 auto;}

垂直居中类似，只要把top和bottom设置后把上下外边距设为auto即可。