浮动与定位

1. 浮动
   浮动元素会以某种方式从文档的正常流中删除，再按照属性值移动到制定的位置，浮动元素从某种意义上来说自成一派，但是他仍会对文档布局产生影响。
   注意事项
   a.如果要对一个非替换元素进行浮动，那么必须为该元素声明一个宽度，否则，根据CSS规则，元素宽度近似为0，元素布局将会出现意想不到的结果。
   b.元素声明为浮动属性之后，将会生成一个块级元素框，无论之前是否是块级元素。
   c.浮动元素的左（右）边界必须是之前浮动元素的右（左）边界，在垂直方向上要尽可能地高，但是顶端不能比之前所有浮动元素，块级元素以及父元素的顶端高。从而充分保证了浮动元素不会重叠。
   d.行内框与浮动元素重叠时，其边框、背景和内容都在浮动元素之上显示（也就是说浮动元素会被覆盖）；而块级框与浮动元素重叠时，其边框和背景在浮动元素之下显示，内容在浮动元素之上显示（边框和背景被覆盖，内容不会被覆盖）
   小技巧：子元素浮动，父元素高度为auto时，并没有获取到值，只需要加上空div，并将其clear设置为both，即<div style="clear:both"></div>

2. 定位
   position包括static、relative、absolute、fixed和inherit五个属性值。
   static：元素默认属性。
   relative：元素偏移，但保留其原本所占的空间。
   absolute：元素从文档流中删除，定位后生成一个块级框，无论他原来是什么类型。
   fixed：性质与absolute类似，但他相对于视窗定位，比如打开网页时右下角总会固定出现广告。
   元素（非根元素）的position值relative与absolute都是相对于包含块定位的，下面对包含块进行介绍。
   1.对于relative，包含块由最近的块级框、表单元格或者行内块祖先框的内容边界构成。
   2.对于absolute，包含块设置为最近的position不是static的祖先元素。如果祖先是块级元素，包含块则设置为该元素的内边距边界；如果祖先元素是行内元素，包含块则设置为该祖先元素的内容边界；如果没有祖先，则设置为初始包含块。