float 与 display：inline-block

Posted 2020-10-26 db-it

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负值可以去除所有浏览器的换行符间隙。