行内元素：没有宽高属性，并且不会独占一行，任何元素一旦浮动，display属性将完全失效均可以设置宽高，并且不会独占一行
下面举例说明一下，先布局下页面：
<style type="text/css">
*{
margin:0 ;
padding: 0;
}
#box{
width: 300px;
height: 300px;
background: deeppink;
}
#box>div:nth-child(1){
width: 100px;
height: 100px;
background: green;
}
#box>div:nth-child(2){
width: 100px;
height: 100px;
background:blue ;
}
#box>div:nth-child(3){
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="box">
<div></div>
<div></div>
<div></div>
</div>
</body>
此时，页面上显示的是：
但是，当我们把第一个子元素的div设置为左浮动时候，我们发现：
#box>div:nth-child(1){
width: 100px;
height: 100px;
background: green;
/*
* 设置左浮动
*/
float: left;
}
此时页面上变成了：
这时候蓝色的div不见了，它其实是在的，当我把蓝色的div的高度设置为150px的时候，我们发现：
其实只是因为将元素排除在普通流之外，元素将不再页面上占据空间，第一个div浮动了，不占据空间了，那后边的div自动就网上跑了。
当我们把第一个元素的浮动设为右浮动，可能会更清楚：
