需求：
1.能够实现让多个元素排在同一行，并且给这些元素设置宽度与高度！
2.让多个元素排在同一行：行内元素的特性;
3.给这元素设置宽高：块级元素的特性;
4.在标准文档流中的元素只有两种：块级元素和行内元素。如果想让一些元素既要有块级元素的特点也要有行内元素的特点，只能让这些元素脱离标准文档流。
5.浮动可以让元素脱离标准文档流,就可以实现让多个元素排在同一行,并且可以设置宽高！
6.浮动它是通过一个浮动属性来实现
float:这个属性有两个值Ieft(向左浮动)向左移动、right(向右浮动)向右移动
浮动元素的特性：
- 浮动元素它脱离标准文档流它不再占用空间了
- 我们可以把浮动元素理解为“漂”
- 浮动元素它的层级要比标准文档流里面的元素层级要高,它会将标准文档流中的元素给压盖住
- 浮动元素它会向左或者向右进行浮动（移动）
- 浮动元素它遇到了父元素的边框然后就停止了浮动
- 浮动元素它还会遇到上一个浮动元素后就停止了浮动
- 浮动元素浮动以后其父元素不会再包裹着浮动元素·
- 我们将行内元素进行浮动以后那么这个行内元素它会变成块级元素
代码展示
<div class="box">
<div class="text1">框1</div>
<div class="text2">框2</div>
<div class="text3">框3</div>
</div>
<style type="text/css">
.box{
width: 600px;
height: 400px;
border: 1px dashed #000;
margin: 0 auto;
color: #fff;
}
.text1,.text2,.text3{
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
.text1{
background-color: #f00;
float: left;
}
.text2{
background-color: #0f0;
}
.text3{
background-color: #ccc;
}
</style>
以上说明:浮动元素它的层级要比标准文档流里面的元素层级要高,它会将标准文档流中的元素给压盖住