<span class="box3">微笑是最初的信仰3</span>
</div>
</body>
</html>
结果图
现在发现我们给
span标签设置了宽高度为
100px像素并没有生效，因为现在
span标签还是行内元素。现在我们给
span标签设置左浮动，然后我们在看看效果如何。代码块
<!DOCTYPE html>
<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>浮动</title>
<style>
.box{
width: 600px;
border: 1px solid #000;
}
.box1{
width: 100px;
height: 100px;
background-color: #f00;
float: left;
}
.box2{
width: 100px;
height: 100px;
background-color: #0f0;
float: left;
}
.box3{
width: 100px;
height: 100px;
background-color: #00f;
float: left;
}
</style>
</head>
<body>
<div class="box">
<span class="box1">微笑是最初的信仰1</span>
<span class="box2">微笑是最初的信仰2</span>
<span class="box3">微笑是最初的信仰</span>
</div>
</body>
</html>
结果图
注意：行内元素设置为浮动之后就拥有了块级元素的特点。
设置浮动总结
浮动的特点如：
浮动元素脱离了标准的文档流，不再占用父元素的任何空间。
浮动元素比标准文档流的元素层级要高，会将标准文档流的元素遮挡住。
浮动元素会向左浮动或向右浮动。浮动元素会遇到父元素的边缘就停止了浮动。
浮动元素会遇到已经有了浮动的元素，后者会浮动到前者之后就停止了浮动。
浮动元素浮动之后就脱离了父元素，并且父元素不再包裹浮动的元素。
行内元素设置为浮动，就拥有了块级元素的特点。
为什么要清除浮动呢？
因为浮动的元素会影响到下面元素，具体看实践结果图大家就明白了。
class属性值为
.box
