是根据标签类别分类：
1. 内联无素（a,span等）
特点：不独占一行，设置宽高（内容多大，盒子多大）
设置display:inline 可以将块状元素转换为内联元素
例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
#outer{
display:inline;
/*background-color: pink;
border: 1px solid black;*/
/*这里请不要为了让他体现出来加上背景和边框*/
width:400px;
height: 400px;
}
#inward{
background-color: skyblue;
width:200px;
height: 200px;
}
</style>
</head>
<body>
<div id="outer">
<div id="inward">
</div>
</div>
</body>
</html>注： 这里的outer里的大小并没有400*400px，因为内容只有200*200px ，所以outer的大小也只有200*200，上面代码中不加背景和边框，是因为他们自带样式会加大原来盒子大小（可以通过F12，在开发工具里测试）
2. 块级元素(div,h1,p,ul等)
特点：独占一行，高度自适应，设置宽度有效（默认宽度与父元素同宽）
设置display:block 可以将元素转换块级元素。
可用于清除浮动，例：
清除浮动之前
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>浮动</title>
<style type="text/css">
.person{
border: 1px solid black;
background-color: pink;
/*width:600px;
height: 600px;*/
/*除非必要时为父元素增加宽度高度*/
}
.sun1{
background-color: skyblue;
width:200px;
height: 200px;
float: left;
}
</style>
</head>
<body>
<div class="person clearfix">
<div class="sun1"></div>
</div>
</body>
</html>清除浮动之后
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>清除浮动</title>
<style type="text/css">
.person{
border: 1px solid black;
background-color: pink;
/*width:600px;
height: 600px;*/
/*除非必要时为父元素增加宽度高度*/
}
.sun1{
background-color: skyblue;
width:200px;
height: 200px;
float: left;
}
.clearfix:after{
content:"";
display: block;/*将设置为行内元素，内容多高且多高*/
clear: both;
}
</style>
</head>
<body>
<div class="person clearfix">
<div class="sun1"></div>
</div>
</body>
</html>注： 浮动元素中的内容不会对父盒子有影响，只能清除浮动过后，来撑大父盒子
3. 行内块元素，也称内联块级元素(input,img等)
特点：不独占一行，可以设置宽度，高度
display:inline-block 可以将元素设置为内联块级元素。
