三种可视化格式模型：普通文档流、相对定位与绝对定位、浮动

标签：style   blog   http   color   io   os   使用   ar   sp   

在CSS中是有三种定位机制的：普通文档流、浮动和绝对定位。在未指定其它两种定位机制的情况下，所有框都是在普通文档流中定位的。

普通文档流：

　　普通文档流，顾名思义，就是根据块级元素的标签在HTML里的顺序，像水流一样，从上至下。当然对于行内元素而言，还是在一行中水平排列的。

　　这里插入一个积累的小知识点。

　　行内元素可 以在水平（内间距、边框。外边距）方向上修改它们水平尺寸，但是在垂直方向上对行内元素的高度是毫无影响的，还有就是直接定义行内元素的 width/height也是毫无影响。对与行内元素来说，它的高度仅仅容纳下它所包含的内容即可。But，通过设置行内元素的行高line- height，就可以增加这个行内元素的高度。(当然还有就是，将行内元素的style属性里设置一个display:block，即可将其转化成块级元素。)

相对定位和绝对定位：

• 相对定位(relative): 是一种相对于起点的移动，根据top和left值做出改变。但是无论是否移动，元素仍然占据原来的空间，所以移动的元素会导致覆盖的情况。它仍然是被看　 作普通文档流的一部分，这和接下来的绝对定位有着本质区别。

• 绝对定位(absolute): 这是一种非常有用，也经常被人滥用的css技术。绝对定位会使元素脱离普通文档流，不占据文档流的空间。其它元素的布局会忽视绝对定位。它是相对于 基于它的上一个已经定位的祖先元素进行偏移。若没有已经定位的祖先元素，通常情况下就会根据HTML元素进行偏移。进行绝对定位后，会有显示的层级z- index，数值越高，层级越高。
• 固定定位(fixed): 它也属于绝对定位，脱离文档流，会发生覆盖。但是它是基于视口的定位而且随着滚动条滚动，位置不会发生改变。（IE6并不支持）

下面说说它们的组合用法：

　　对于一个嵌套的元素，要让内层元素灵活定位在包含元素的附近。可以先让包含元素position:relative，再让内层元素position:absolute，这样内层元素就会相对于外层元素进行位移。

（很多所见即所得的software，就是将所有元素都进行绝对定位，通过精确的像 素定位各个部分的元素。但是问题也十分明显，可维护性极其低下，一旦有一些例如字号修改等会改变元素尺寸的行为，会导致布局完全混乱，不得不为了这点小改 变，进行页面重构。放弃所见即所得吧，它会让你变得懒惰自满。）

浮动：

重点说一下浮动.

　　浮动（float）是最有意思的一个可视化模型，会经常应用到我们实际的前端页面上。

　　进行浮动后的元素，会和绝对定位相似，脱离文档流，失去文档流的元素空间。若进行左浮动，脱离文档流的元素会向左移动，直到遇到包含元素的左边缘。若多个元素一起浮动，则除第一个元素之外，其它元素都会定位在前一个浮动元素之后（即它的右边）。

　　若包含元素不够宽，则无法水平排列的元素会向下移动，直到有足够的空间。若浮动元素的高度不一致，还会发生元素卡在较高的元素的现象。请看图片。

　　还有关于元素浮动造成包含元素高度塌陷。

　　因为浮动元素脱离了文档流，所以浮动元素并不会占据包含元素的空间，包含元素高度不会自动撑开，造成塌陷。我们需要做点清除浮动的处理。

1. 我们可以在包含元素最后增添一个新的空元素，并在空元素style上应用clear:both。但缺点也明显，clear只对块级元素有用，这样会增添了一些无意义的块级标签。
2. 对包含元素也应用浮动。这个方法万不可使用，如果全部都进行浮动，页面会极其复杂。
3. 使用overflow的副作用。overflow本是用来对溢出内容进行样式声明，但它有一个“副作用”，就是会清除包含元素里的浮动元素。使用这个方法的缺点是，一旦有溢出内容，则会造成内容被切断，出现清楚浮动的副作用。
4. 使用:after伪元素（伪类），动态生成元素，并做清除浮动，不会有无意义标签。缺点是不兼容老版IE浏览器。

　　一般来说，3、4比较常用，具体怎么用需要看实际情况定夺。

下面详细说一下方法4，一般来说方法4的CSS代码如下：

 　　"."是一个非常小不会被注意的字符。因为要让其不可见，所以要把它的height设置为0，且它的visibility设置为 hidden。最后为了使其变成块级元素能够clear要用到display:block;这样就Done了。当然对于不兼容的老IE还要再加一个类：

 大致做了一个新手总结，希望可以帮到大家。

三种可视化格式模型：普通文档流、相对定位与绝对定位、浮动

标签：style   blog   http   color   io   os   使用   ar   sp   

原文地址：http://www.cnblogs.com/tangyangping/p/4024348.html