1.为什么关注此问题？
行内元素设置为浮动后，可以设置宽高了，为什么？
我们知道Html元素分三种
块级元素（display:block）--> 可以设置元素的宽高
行内元素（display:inline）--> 默认不换行,设置width/height无效(可以设置line-height)，margin/padding上下无效
行内块级元素（display:inline-block ）--> 可以设置宽高的特性，同时又具有 inline 元素默认不换行的特性
实践出真知，动手吧！
-
-
<html lang="en">
-
<head>
-
<meta charset="UTF-8">
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
<meta http-equiv="X-UA-Compatible" content="ie=edge">
-
<title>Document</title>
-
-
</head>
-
-
<style>
-
.spn{
-
border: 2px solid #000000;
-
}
-
.mydiv{
-
border: 2px solid #000000;
-
}
-
#in{
-
display: inline-block;
-
border: 2px solid #005599;
-
}
-
</style>
-
<body>
-
<div class="page">
-
<span class="spn">行内元素1</span>
-
<span class="spn">行内元素2</span>
-
-
<p id="in">行内块状元素1</p>
-
<p id="in">行内块状元素2</p>
-
-
<div class="mydiv" id="a">
-
块状元素1
-
</div>
-
-
<div class="mydiv" id="b">
-
块状元素2
-
</div>
-
</div>
-
</html>
效果图：
操作一：
设置行内元素浮动，查看display的值
设置前
设置后
操作二：
设置块级元素浮动，查看display的值
设置前
设置后
操作三：
设置块级行内元素浮动，查看display的值
设置前
设置后
结论： 设置元素为浮动后，display的值是block
2.有什么意义？
以后在项目中如果需要设置行内元素的宽高，则设置为浮动后，就可以设置了