1、块元素
2、行元素
块元素标签通常独占一行，排列为上下排列，例如div标签。
行元素标签则体现为不独占一行，排列为并排排列，例如strong标签。
举个例子，假如我们需要将行元素强行转换令其可并排排列，于是我们需要将所要的元素变为浮动型（float）。用水槽原理。我们可将元素视为一个可漂浮物品，从水下按照顺序依次上浮，float:left可以视为物体需要上浮后往左移动，同理float:right可以视为上浮后元素需要往右移动，这里我们定义两个浮动元素：
<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>浮动元素对比</title>
<style>
.box1 {
width: 200px;
height: 200px;
float: left;
}
.box2 {
width: 200px;
height: 40px;
float: left;
}
</style>
</head>
<body>
<div class="box1">浮动元素1</div>
<div class="box2">浮动元素2</div>
<div>文档</div>
</body>
</html>
运行结果如下：
我们可以看到运行结果中，“文档”元素并没有按照div的特性另外单独占一行，而是直接靠着浮动元素列出。由此例子可看出浮动元素的浮动性质会对其他元素造成影响，此时我们需要清除浮动，才能去除浮动对后面的元素影响。
我们可以在将body内改为：
<body>
<div class="box1">浮动元素1</div>
<div class="box2">浮动元素2</div>
<div style="clear:left"></div>
<div>文档</div>
</body>
运行后可以看到结果：
此时非浮动元素则正常显示。
原文：http://www.cnblogs.com/huangcan/p/4638939.html