在总结浮动与定位之前,先引入一个概念,就是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网页设计中经常用到的设计模式,总结了一下如下表: (图片引自博主的新浪博客)