HTML、CSS学习总结二：浮动与定位

　　在总结浮动与定位之前，先引入一个概念，就是HTML中文档流，文档流简单的理解就是HTML中的元素按照代码的先后顺序以从左到右，从上到下的顺序排列，一个接一个的排列，也就成为了一个流stream，每个元素都在文档流中都占据一定的大小、空间，改变一个元素的布局会直接影响其他元素的布局。

　　而浮动与定位中的绝对定位都会使元素脱离文档流，什么意思呢？就是说如果一个元素被设置了浮动或绝对定位属性，那么这个元素好像脱离HTML文档一样，而其余的元素重新按照正常的文档流排列。

浮动：浮动会使元素脱离正常的文档流，浮动的块状元素元素是以浮动元素所在行为基准，并且按照不合并margin的方式来进行浮动的。浮动元素会脱离当前的文档流，将元素放在父元素内边距里侧的左边或者右边，浮动的定位层在块状元素之上，内联元素相邻，自成一新的文档流，按照从左到右，从上到下的顺序排列。

 

　　定位：元素默认的定位方式是position:static;当设置了position:relative; position:fixed;或者position:absolute;时，我们说元素是被定位了的，其中一个绝对定位(position:absulote;)的元素，是以离它最近的被定为的祖先元素为基准的，绝对定位会使元素脱离文档流，它的layout将不会对其他元素的产生影响，而其他的元素重新按照正常的文档流排列。一个元素，无论是display:block;还是inline-block还是inline，只要设置了绝对定位，那么它将表现为一个绝对定位元素，绝对定位的定位层在未进行绝对定位的元素之上。可以设置width、height，不会拉伸但是会自动包裹。通过绝对定位可以将元素定位到其他元素的上面或者上面，从而实现首字母下沉、文本替换等效果。

　　对于一个元素，通过display:block | inline; positon:static | absolute;以及设定尺寸(sized)、拉伸(stretched)、包裹(wrapped)的不同组合，将产生多种不同的设计模式，这也是HTML网页设计中经常用到的设计模式，总结了一下如下表： (图片引自博主的新浪博客)