1.float 属性界说元素在哪个偏向浮动。以往这个属性总应用于图像，使文本环绕在图像周围，不外在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而岂论它自己是何种元素。div一个典范的块级元素，会单独有据一行。
先看看最根基的块级元素如何分列的。html代码，以下样式都是基于此。
复制代码 代码如下:
<div>
<div>
框框1
</div>
<div>
框框2
</div>
<div>
框框3
</div>
</div>
css代码：
复制代码 代码如下:
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc
}
.box1{
width:100px;
height:50px;
background-color:red
}
.box2{
width:100px;
height:50px;
background-color:blue
}
.box3{
width:100px;
height:50px;
background-color:green
}
执行功效：
由于div是块级元素，所以框会以纵向形式分列。在实际操纵中往往需要将框横向分列。有两种方法可以实现。第一种将display:inlin-block;
复制代码 代码如下:
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc
}
.box1{
width:100px;
height:50px;
background-color:red;
display:inline-block
}
.box2{
width:100px;
height:50px;
background-color:blue;
display:inline-block
}
.box3{
width:100px;
height:50px;
background-color:green;
display:inline-block
}
执行功效：
至于中间的偏差，追溯到本质原因是元素之间的空缺符引起的，所以在父元素配置fone-size的巨细，可以调理空缺偏差的巨细。
复制代码 代码如下:
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:34px;
}
将font-size:34px之后，那么偏差会变宽。
执行功效：
同理，要去掉偏差，那么需要将font-size:0;
复制代码 代码如下:
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
font-size:0
}
执行功效：
如此便实现了想要的机关，框里边的文字也随着消失了，同样也证明文字的巨细影响偏差。只需要在子元素里从头配置就可以了。虽然本日的重点并不是这个。同样的结果float:left;也可以轻松实现。
复制代码 代码如下:
<style>
.boxBg{
margin: 0 auto;
width:500px;
height:200px;
border:2px solid #ccc;
}
.box1{
width:100px;
height:50px;
background-color:red;
float:left
}
.box2{
width:100px;
height:50px;
background-color:blue;
float:left
}
.box3{
width:100px;
height:50px;
background-color:green;
float:left
}
</style>
执行功效：
