float 與 display：inline-block

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負值能夠去除全部瀏覽器的換行符間隙。