float：

1.會導致高度塌陷

<style type="text/css">
    li{
        float:left;
        height:200px;
        width:200px;
        background-color: red;
        margin:10px;
        font-size: 50px;
        text-align: center;
        line-height: 200px;
        list-style: none
    }
    ul{
        border:5px solid green;    
        width:
 
100%;
    }
<style>

<ul>
    <li>1</li>
    <li>2</li>
</ul>

2.若float元素高度不一，會形成鋸齒狀

<style type="text/css">
    div{
        float:left;
        height:200px;
        width:200px;
        background-color: red;
        margin:10px;
        font-size: 50px;
        text
 
-align: center;
        line-height: 200px;
}
    div.q1{
        height:500px;
}
        
</style>  


<div>1</div>
<div class="q1">2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>   

2.display：inline-block

　　註：每一行所有的inline元素與inline-block元素 會形成一個inline box ，該inline box的高度由inline 或inline-block元素的高度來決定，所以不會出現鋸齒狀

　　問題：換行符與空格間隙問題

　　　　　（1）空格符的本質就是透明的字符，所有可以通過font-size：0 來去除空格

　　　　　（2）letter-spacing 屬性

　　總結：

　　　　block水平的元素inline-block化後，IE6/7沒有換行符間隙問題，其他瀏覽器均有；
　　　　inline水平的元素inline-block後，所有主流瀏覽器都有換行符/空格間隙問題；
　 　　font-size:0，去除換行符間隙，在IE6/7下殘留1像素間隙，其他瀏覽器都完美去除；
　　 letter-spacing負值可以去除所有瀏覽器的換行符間隙。

float 與 display：inline-block