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.有什么意義？
以后在項目中如果需要設置行內元素的寬高，則設置為浮動后，就可以設置了