CSS 定位 浮动

概览

CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立各种布局，极大提高HTML页面的表现力。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，或者另一个元素甚至浏览器窗口本身的位置。

CSS 有三种基本的定位机制：

• 普通流，包含默认定位（static）和相对定位（relative）。

• 浮动 float.

• 绝对定位，包含 absolute 和 fixed.

一切皆为框

在 CSS 盒模型 一文中简单的认识了元素框的概念（主要是块框），这里再进行部分补充。

div、h1 或 p 元素常常被称为 块级元素 。这意味着这些元素显示为一块内容，即 块框 。与之相反，span 和 strong 等元素称为 行内元素，这是因为它们的内容显示在行中，即 行内框。不过，您可以使用 display 属性改变生成的框的类型。

还有一种框叫 无名框。这种情况发生在把一些文本添加到一个块级元素（比如 div）中。假设有一个包含三行文本的段落，每行文本形成一个 无名框。

<div>
some text - 无名框
<p>
Some more text. - 无名框
<br>
Some more test. - 无名框
<span>google</span> - 行内框
<br>
Some more test. - 无名框
</p>
</div>

在HTML默认布局中，块框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来（注意外边距值合并的情况）。

行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。

引用 张鑫旭 文章中对框的描述：

<p>这是一行普通的文字，这里有个 <em>em</em> 标签。</p>

这段HTML代码涉及到四种 boxes:

1. 首先是 p 标签所在的 containing box,此box包含了其他的boxes;

2. 然后就是 inline boxes,如图标注；
   

被标签包围的叫行内框，如果是光秃秃的文字，则属于匿名行内框（无名框）。

1. line boxes，见下图标注；
   

在 containing boxes 里，一个一个的 inline boxes 组成了 line boxes。

1. content area，见下图标注；
   

content area 是一种围绕文字看不见的box。content area 的大小与 font-size 大小相关。

定位 position

position 属性规定元素的定位类型。有以下 5 种值可供选择。

值	描述
absolute	<p>生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。</p> <p>元素的位置通过 left, top, right 以及 bottom 属性进行规定。</p>
fixed	<p>生成绝对定位的元素，相对于浏览器窗口进行定位。</p> <p>元素的位置通过 left, top, right 以及 bottom 属性进行规定。</p>
relative	<p>生成相对定位的元素，相对于其正常位置进行定位。</p> <p>元素的位置通过 left, top, right 以及 bottom 属性进行规定。</p>
static	默认值。没有定位，元素出现在正常的流中（忽略 left, top, right, bottom 以及 z-index 声明）。
inherit	从父元素继承，IE8之前不支持。

任何元素都可以定位，不过 absolute 或 fixed 会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

绝对定位 absolute

元素框从文档流完全删除，并相对于其包含块定位。元素定位后生成一个块级框，而不论原来它在正常流中是何种类型的框。

绝对定位的元素的位置相对于 最近的已定位祖先元素（这里的已定位元素指除 static默认定位的其余三种），如果元素没有已定位的祖先元素，那么它的位置相对于 最初的包含块。

#box2 {
    position: absolute;
    left: 30px;
    top: 20px;
}

因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其它元素。可以通过设置 z-index 属性来控制这些框的堆放次序。

固定定位 fixed

固定定位类似于将 position 设置为 absolute，不过其包含块是视窗本身。

fixed 是一种特殊的绝对定位，对其设置的偏移量永远是相对于视窗本身。我们常见到的导航条固定在页面顶部，回到页面顶部按钮基本都是采用此定位方式。

div#top {
    position: fixed;
    right: 5px;
    bottom: 5px;
}

同样可以通过设置 z-index 属性来控制这些框的堆放次序。

相对定位 relative

元素仍保持其未定位前的形状，它原本所占的空间仍保留。

在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。同样可以通过设置 z-index 属性来控制这些框的堆放次序。

默认定位 static

元素框正常生成，按框类型正常定位。

浮动 float

浮动的框可以向左或向右移动，直到它的外边缘碰到 包含框或 另一个浮动框的边框为止。

浮动和绝对定位类似（由于其是否脱离文档流存在争议故这里避而不谈），可能会覆盖掉页面正常的框。

向右浮动，原来的空间被其他框所占用。

向左浮动，覆盖其他框。

三个框都浮动，后面的框碰着前一个框的边框顺序排列。

当一行无法容纳下完整的一个框时，自动从下一行依次排列。

如果一行中无法容纳所有浮动框，后面的框会从下一行依次排列，排列起始位置取决于第一行已经排好的框的高度，以已经排好的行的最后一个框的高度为基准，从后往前找比此基准高的框，如果找到则起始位置为找到的这个框的下一个框的下面，如果没有找到比此基准高的框则从第一个往后排，始终保证新一行所有框的顶部与基准框的底部处于同一水平线上。（语言描述太麻烦了，我自己看都快晕了，看图吧）

图中第一行为排好的，其中框一高度最大，框三次之，其余三个高度相同，以框五为基准，往前找比框五大的，找到了框三，第二行第一个位置即为框四的下面（框三的下一个），框六，框七的顶部与框五的底部保持同一水平线（即使框四的高度小于80px,也应该同框五底部保持一致），框八以框七为基准继续往前找。

我们上面也说了，浮动可能会覆盖别的框，但有例外。

当行框与浮动框相遇时，浮动框旁边的行框被缩短，从而给浮动框留出空间，行框围绕浮动框，这里的行框也仅限于普通文档流中的行框（绝对定位中的文本还是会被覆盖的）。

浮动框确实覆盖了p元素框，但是文本没有被覆盖，换句话说就是行框被缩短。

有时我们仅仅希望使用浮动来进行文档布局，浮动元素的尺寸仍然保留，这就需要用到浮动清除（clear）了。

浮动清除 clear

用下面这个实际场景来介绍浮动清除的使用吧。

假设希望让一个图片浮动在左边，文本块浮动在右边，并且希望这幅图片和文本包含在另一个具有背景颜色和边框的元素中。

由于浮动，容器将无法包围他们，当然无法达到我们想要的效果。

由于两个块都是浮动的，无法对他们进行清除浮动，所以只能借助第三方了。

我们使用一个空的div元素以实现下图的目标。

div.clear {
    clear: both;
}

清除浮动的方式当然不止上面一种，但上面的方式兼容性强，使用方便，是初学时使用的上佳之选。

下面再介绍两种不错的选择。

overflow + zoom 方法

.clearfix{overflow:hidden; zoom:1;}

after + zoom 方法

.clearfix{zoom:1;}
.clearfix:after{display:block; content:'clear'; clear:both; line-height:0; visibility:hidden;}

此方法可以说是综合起来最好的方法，不会影响任何其他样式，通用性强，覆盖面广。

相关属性

除了上面介绍的主要属性，与定位和框相关联的其他属性也顺道一起简要了解一下吧。

堆叠顺序 z-index

z-index 属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面，其值可正可负，默认为0。

img.x {
    position:absolute;
    left:0px;
    top:0px;
    z-index:-1;
}

框类型 display

display 属性规定元素应该生成的框的类型。通过此属性你可以轻松的实现块级元素与行级元素的互转，甚至可以通过此属性是元素脱离文档流隐藏起来。

常用的也就：none, block, inline, inline-block。

值	描述
none	此元素不会被显示。
block	此元素将显示为块级元素。
inline	此元素会被显示为内联元素。
inline-block	行内块元素。
list-item	此元素会作为列表显示。
run-in	此元素会根据上下文作为块级元素或内联元素显示。
table	此元素会作为块级表格来显示。
inline-table	此元素会作为内联表格来显示。
table-row-group	此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group	此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group	此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row	此元素会作为一个表格行显示（类似 <tr>）。
table-column-group	此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column	此元素会作为一个单元格列显示（类似 <col>）
table-cell	此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption	此元素会作为一个表格标题显示（类似 <caption>）
inherit	规定应该从父元素继承 display 属性的值。

a#top {
    display: none;
}

记住常用的即可，其余的仅供查阅。

可见性 visibility

visibility 属性规定元素是否可见。

值	描述
visible	默认值。元素可见。
hidden	元素不可见。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 hidden。
inherit	从父元素继承。

h2 {
    visibility:hidden;
}

注意：使用此属性，即使不可见的元素也会占据页面上的空间。请使用 display 属性来创建不占据页面空间的不可见元素。

绝对定位剪裁 clip

clip 属性用来剪裁绝对定位元素。这个属性可以定义一个剪裁矩形。对于一个绝对定位元素，在这个矩形内的内容才可见。剪裁区域可能比元素大，也可能比元素小。

该属性的默认值为 auto , 不应用任何剪裁。

position: absolute;
clip: rect (top, right, bottom, left);

top, bottom 都是相对于包围此元素的祖先元素上框的距离。right, left 都是相对于包围此元素的祖先元素左框的距离。

四个尺寸围成一个矩形，元素在此矩形内的部分被显现出来。

img {
    position:absolute;
    clip:rect(0px 50px 200px 0px)
}

光标定位 cursor

光标定位应该叫光标样式，此属性用来设置当鼠标移动到元素上鼠标应该呈现的样式。这个内容很简单，直接贴出示例。

请将代码自行添加到HTML文件中检验效果。

<span style="cursor:auto;">auto</span><br />
<span style="cursor:crosshair;">crosshair</span><br />
<span style="cursor:default;">default</span><br />
<span style="cursor:pointer;">pointer</span><br />
<span style="cursor:move;">move</span><br />
<span style="cursor:e-resize;">e-resize</span><br />
<span style="cursor:ne-resize;">ne-resize</span><br />
<span style="cursor:nw-resize;">nw-resize</span><br />
<span style="cursor:n-resize;">n-resize</span><br />
<span style="cursor:se-resize;">se-resize</span><br />
<span style="cursor:sw-resize;">sw-resize</span><br />
<span style="cursor:s-resize;">s-resize</span><br />
<span style="cursor:w-resize;">w-resize</span><br />
<span style="cursor:text;">text</span><br />
<span style="cursor:wait;">wait</span><br />
<span style="cursor:help;">help</span>

框溢出 overflow

overflow 属性规定当内容溢出元素框时发生的事情。

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	从父元素继承。

div {
    background-color:#00FFFF;
    width:150px;
    height:150px;
    overflow: scroll
}

如果值为 scroll，不论是否需要，用户代理都会提供一种滚动机制。因此，有可能即使元素框中可以放下所有内容也会出现滚动条。

垂直对齐 vertical-align

vertical-align 属性设置元素的垂直对齐方式。

该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。允许指定负长度值和百分比值。

在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。

值	描述
baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与字体的顶端对齐
middle	把此元素放置在中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与字体的底端对齐。
length
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	从父元素继承。

具体样式请将代码自行添加到HTML文档中验证。

<p>
这是一幅H<SUB>2</SUB>O<img src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> baseline 对齐的图像。
</p> 
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:sub;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> sub 对齐的图像。
</p> 
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:super;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> super 对齐的图像。
</p>
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:top;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> top 对齐的图像。
</p>
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:text-top;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> text-top 对齐的图像。
</p> 
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:middle;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> middle对齐的图像。
</p>
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:bottom;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> bottom 对齐的图像。
</p>
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:text-bottom;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> text-bottom 对齐的图像。
</p>
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:24px;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> 24px 对齐的图像。
</p>
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:0px;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> 0px 对齐的图像。
</p>
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:-50px;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> -50px 对齐的图像。
</p>
<p>
这是一幅H<SUB>2</SUB>O<img style="vertical-align:20%;" src="http://i11.buimg.com/b8eaac4d3b209c7c.gif" />X<SUP>2</SUP> 20% 对齐的图像。
</p>

小结

CSS 定位和浮动是HTML布局中的重要部分，需要认真参透。注意掌握定位的几种类型及区别，理解浮动的排列及清除，掌握与定位相关的一些属性。

篇幅还是稍长，估计大伙都没时间看完了。

参考资料

• CSS float浮动的深入研究、详解及拓展(一)

• CSS float浮动的深入研究、详解及拓展(二)

• 还有一篇讨论浮动是不是脱离文档流的帖子：float 有没有脱离文档流 ？？