?

HTML和CSS高级指南之二——定位详解原文

?

当在这一个页面上实现布局和定位有几种不同的技术。使用哪种技术，很大程序上取决于内容和目标页面，因为有很多技术比别人的更牛。

?

例如，浮动可以让页面元素并排显示，而且还可以制作一个干净的布局。然而，有时候需要一些严格的定位，这时需要使用其他的技术，包括“relative”和“absolute”定位。

?

在这节课中，我们先来介绍一下浮动的使用，接下来详细介绍定位的技巧，包括如何准确的给元素在X轴、Y轴和Z轴定位。

?

• 包含浮动
• 定位属性
• z-index属性

包含浮动

?

创建一全页面的布局时，浮动是一种常用的方法，也是页面元素定位的一种基本功能。浮动可以让元素一个挨着一个。浮动可以创建一个自然流布局，同时充许元素设置自身尺寸和其父元素容器的尺寸大小。

?

当元素浮动时，一个元素的位置依赖于放置在他周边的其他元素。那么围绕在他周边的是哪个元素呢？这个元素会换行吗？这一切都取决于围绕于他的元素的DOM（文档对象模型）。

?

DOM是什么？

DOM是Document Object Model的简称，被译为文档对象模型。是HTML或者XML文档结构的API。在我们的例子中，我们说的是HTML的文档，因此DOM就是代表所有元素以及这些元素之间的关系。

可以考虑树形的表现方式，展元素元素之间的关系。元素嵌套时他们存在父子关系，相同级别的还存在兄弟关系。

?

虽然 浮动相 当的给力，但他们自己还是存在一定的问题。最典型的问题就是一个父元素包含了多个浮动的子元素。页面的内容设置了一个宽度，子元素的浮动确定了他们的位 置，但浮动元素不会影响父元素的宽度。这样做会让父元素塌陷，从而使父元素的高度为“0”，以及忽略其他的属性。很多时候，这种现像都被忽略，特别是在父 元素没有任何样式，以及其子元素看起来都正确的对齐。

?

嵌套的元素不会正确的排列，也会有错误的样式出现。来看看下面的演示，在“.box-set”的div应该有一个高亮的灰色背景，因为所有的子元素浮动后，这个灰色的背景色并不看到。仔细检查后，“.box-set”的高度变成了“0”。

<div class="box-set">
  <div class="box">Box 1</div>
  <div class="box">Box 2</div>
  <div class="box">Box 3</div>
</div>	

?

.box-set {
  background: #e8eae9;
}
.box {
  background: #8ec63f;
  height: 100px;
  float: left;
  margin: 10px;
  width: 200px;
}	

?

?

有一种方法，在容器的结束标签前添加一个空标签，在空标签上直接设置样式“clear:both”。用这种方法来清除浮动，在大多数情况下是有效的，但这不太适合语义化。这取决于一个页面有多少浮动需要清除，这样造成页面上的空标签迅速堆积，而且在页面中没有上下文内容。

?

幸运的是有几种不同方法可以用来清除浮动，而其中用得最多的是“overflow”技巧和"clearfix"技巧。

?

Overflow技巧

?

一种清除浮动的技巧是使用“overflow”属性。在具有浮动元素的父容器中设置“overflow”的属性值为“auto”，这样父容器就会有一个高度存在，在我们例子中的灰色背景也就能看得到了。

?

在IE6里面，父容器是需要设置一个“width”和“height”。因为高度可能是一个变量，宽度为100%，他们将能正常的工作。使用 “overflow:auto;”,在IE浏览器中会给元素添加滚动条，这样一来，最好是直接使用“overflow:hidden;”来清除浮动。

.box-set {
  background: #404853;
  overflow: auto;
}	

?清除浮动后效果

?

使用“overflow”技巧清除浮动，确实存在一些缺点。例如：当你添加样式，或者将嵌套在里面的“span”元素移动到父容器的外面，或者你想给元素添加一个盒子阴影和制作一个下拉菜单。在下面的演示例子中，你可以看到元素的盒子阴影被切断在父元素之内。

不同的浏览器对“overflow”属性解析不一样，在浏览器的显示风格也不一样。看看下面的例子，注意列在不同浏览器的显示效果。

clearfix技巧

根据上下文，清除浮动更好的方法是clearfix技巧。“clearfix”清除浮动的技术是有点复杂，但有有比使用“overflow”技巧清除浮动更好的方法？

“clearfix”技巧是基于在父元素上使用“:before”和“:after”两个伪类。使用这些伪类，我们可以在浮动元素的父容器前面和后 面创建隐藏元素。“:before”伪类是用来防止子元素顶部的外边距塌陷，使用“display: table”创建一个匿名的“table-cell”元素。这也确保在IE6和IE7下具有一致性。“:after”伪类是用来防止子元素的底部的外边距 塌陷，以及用来清除元素的浮动。

在IE6和7的浏览器中，加上“*zoom”属性来触发父元素的hasLayout的机制。决定了元素怎样渲染内容，以及元素与元素之间的相互影响。

采取上面同样的例子，你可以看到容器也清除了浮动，元素也可以移到父容器外面：

.box-set:before,
.box-set:after {
  content: "";
  display: table;
}
.box-set: