行內元素：沒有寬高屬性，並且不會獨佔一行，任何元素一旦浮動，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自動就網上跑了。
當我們把第一個元素的浮動設爲右浮動，可能會更清楚：
