是根据标签类别分类:
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 可以将元素设置为内联块级元素。