成都创新互联公司自成立以来，一直致力于为企业提供从网站策划、网站设计、网站建设、网站设计、电子商务、网站推广、网站优化到为企业提供个性化软件开发等基于互联网的全面整合营销服务。公司拥有丰富的网站建设和互联网应用系统开发管理经验、成熟的应用系统解决方案、优秀的网站开发工程师团队及专业的网站设计师团队。

div、h2或p元素常常被称为块级元素。这意味着这些元素显现为一块内容，即“块框”。与之相反，span和h4等元素称为“行内元素”，这是由于它们的内容显现内行中，即“行内框”。

在这种状况下，这个框称为无名块框，由于它不与专门界说的元素相关联。

块级元素的文本行也会发作相似的状况。假设有一个包括三行文本的阶段。每行文本构成一个无名框。无法直接对无名块或行框运用款式，由于没有能够运用款式的地方(留意，行框和行内框是两个概念)。可是，这有助于了解在屏幕上看到的全部东西都构成某种框。

CSS定位机制

CSS有三种基本的定位机制：普通流、起浮和肯定定位。

除非专门指定，不然全部框都在普通流中定位。也就是说，普通流中的元素的方位由元素在X(HTML)中的方位决议。

块级框从上到下一个接一个地摆放，框之间的笔直间隔是由框的笔直外边距计算出来。

行内框在一行中水平安置。能够运用水平内边距、边框和外边距调整它们的间隔。可是，笔直内边距、边框和外边距不影响行内框的高度。由一行构成的水平框称为行框(LineBox)，行框的高度总是足以包容它包括的全部行内框。不过，设置行高能够添加这个框的高度。

在下面，咱们会为您详细解说相对定位、肯定定位和起浮。

CSS position特点

经过运用position特点，咱们能够挑选4中不同类型的定位，这会影响元素框生成的方法。

position特点值的意义：

static

元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创立一个或多个行框，置于其父元素中。

relative

元素框偏移某个间隔。元素仍坚持其未定位前的形状，它本来所占的空间仍保留。

absolute

元素框从文档流完全删去，并相对于其包括块定位。包括块可能是文档中的另一个元素或者是初始包括块。元素原先在正常文档流中所占的空间会封闭，就好像元素本来不存在相同。元素定位后生成一个块级框，而不管本来它在正常流中生成何种类型的框。

fixed

元素框的体现相似于将position设置为absolute，不过其包括块是视窗自身。

提示：相对定位实际上被看作普通流定位模型的一部分，由于元素的方位相对于它在普通流中的方位。

CSS定位特点

CSS定位特点答应你对元素进行定位。

特点描绘

position把元素放置到一个静态的、相对的、肯定的、或固定的方位中。

top界说了一个定位元素的上外边距鸿沟与其包括块上鸿沟之间的偏移。

right界说了定位元素右外边距鸿沟与其包括块右鸿沟之间的偏移。

bottom界说了定位元素下外边距鸿沟与其包括块下鸿沟之间的偏移。

left界说了定位元素左外边距鸿沟与其包括块左鸿沟之间的偏移。

overflow设置当元素的内容溢出其区域时发作的工作。

clip设置元素的形状。元素被剪入这个形状之中，然后显现出来。

vertical-align设置元素的笔直对齐方法。

z-index设置元素的堆叠次序。

CSS为定位和起浮供给了一些特点，运用这些特点，能够树立列式布局，将布局的一部分与另一部分堆叠，还能够完结多年来一般需求运用多个表格才干完结的使命。

定位的基本思想很简单，它答应你界说元素框相对于其正常方位应该呈现的方位，或者相对于父元素、另一个元素乃至浏览器窗口自身的方位。明显，这个功用十分强壮，也很让人吃惊。要知道，用户署理对CSS2中定位的支撑远胜于对其它方面的支撑，对此不该感到奇怪。

另一方面，CSS1中初次提出了起浮，它以Netscape在Web开展初期添加的一个功用为根底。起浮不完满是定位，不过，它当然也不是正常流布局。咱们会在后边的章节中清晰起浮的意义。

全部皆为框

p、h2或p元素常常被称为块级元素。这意味着这些元素显现为一块内容，即“块框”。与之相反，span和h4等元素称为“行内元素”，这是由于它们的内容显现内行中，即“行内框”。

您能够运用display特点改动生成的框的类型。这意味着，经过将display特点设置为block，能够让行内元素(比方元素)体现得像块级元素相同。还能够经过把display设置为none，让生成的元素底子没有框。这样的话，该框及其全部内容就不再显现，不占用文档中的空间。

可是在一种状况下，即便没有进行显式界说，也会创立块级元素。这种状况发作在把一些文本添加到一个块级元素(比方p)的最初。即便没有把这些文本界说为阶段，它也会被当作阶段对待

文章题目：web前端css定位position和起浮float-创新互联
网页链接：http://kswjz.com/article/djidse.html