元素的正常定位
元素的类型分为块级元素和行级元素。
比如div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。
可以通过display属性，设置元素的具体表现。比如
p.inline
{
display:inline;//行内元素，block为块级元素，none不显示
}
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。可以使用水平内边距、边框和外边距调整它们的间距。但是，垂直内边距、边框和外边距不影响行内框的高度。由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。不过，设置行高可以增加这个框的高度。
相对定位
相对定位是对于块级元素原本应该出现的位置来说的。
#box_relative {
position: relative;
left: 30px;
top: 20px;
}
这样就会在原本的位置上，左移30px，下移20px了。然而相对定位中，其他的元素位置不变，所以相对定位会导致覆盖其他元素的内容。
绝对定位
绝对定位是将元素脱离文档流，把元素独立于其他所有的元素，定位在页面中的指定位置上。
#box_relative {
position: absolute;
left: 30px;
top: 20px;
}
这样元素就会出现在距离页面的左边框30px上边框20px的地方。
浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
这个就很有意思，其实浮动感觉像是起了另一层的文档流。浮动的元素不与正常的文档元素互动，但是会影响相邻的行框（可以让文本完整地展示出来而不是覆盖文本），但是块框就不会跟浮动产生任何互动。
w3school.com.cn
w3school.com.cn
w3school.com.cn
w3school上面讲得就很清楚，而且看到这三张图，真的有那种，浮动的感觉，水流流向左边，树叶（块级元素）碰到了岸边（页面边缘），卡住，下一片树叶流过去卡住，卡满了就被冲到下面。
与块级元素的互动就这样。那与行框的影响也很有意思。
<html>
<head>
<style type="text/css">
img
{float:right}
</style>
</head>
<body>
<p>在下面的段落中，我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img src="/i/eg_cute.gif" />
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
</p>
</body>
</html>
如果说像绝对定位脱离了文档流，那在这个例子里面，图片肯定是盖住了文字导致文字无法正常看的，但是用浮动的话，文字会围着图片，而不会导致文字被挡住的情况。
我们并不想靠水流自己的力量去影响元素，比如我们并不想让文字围绕着图片，因为我可能想另起一段，在图片的下面，又比如我想要让浮动元素全部贴着边框，而不是一个个排满了才会贴着边框，这个就需要用到clean属性了。
还记得我上面讲的那个水流的例子吗。利用clean可以给元素一块“完整的板”，让他遇到浮动元素的时候，不是围绕着它，而是“卡住”。跑到浮动对象的下面去。
img
{
float:left;
clear:both;
}
//left 在左侧不允许浮动元素。
//right 在右侧不允许浮动元素。
//both 在左右两侧均不允许浮动元素。
//none 默认值。允许浮动元素出现在两侧。
//inherit 规定应该从父元素继承 clear 属性的值。
网友评论