inline-block与float浮动的区别

在给网页布局的时候有多种方法，采用float,display,position.其中inline-block也可以实现网页布局，这里就说一下float和inline-block布局的差异。

通常情况下小编是喜欢inline-block。而float浮动布局还要清楚浮动，有些麻烦。

一 float浮动布局

<div class="main">
<div class="slide" style="background: red;"></div>
<div class="slide" style="background: green;"></div>
<div class="clear"></div>
</div>

.slide{
width: 100px;
height: 100px;
float: left;
}
.clear{
clear: both;
}

效果图如图1-1所示






图1-1

大家注意看一下两个元素的中间没有空隙，没有给浮动元素添加多余的外边距。

二 inline-block布局

 

<div class="main">
<div class="slide" style="background: red;"></div>
<div class="slide" style="background: green;"></div>
</div>

.slide{
width: 100px;
height: 100px;
display: inline-block;
}

效果图如1-2所示



图1-2

和图1-1对比一下，两个元素的中间多了几个像素的空隙，每个浏览器的效果不一样，谷歌是4个像素，别的大概是3个像素，（没有仔细量过）。出现这样的情况是很影响页面的布局的，为了进行合理的布局，达到完美的效果，清除几个像素之差只要给父容器添加属性font-size:0;就ok了。

修改之后的css

.main{
font-size: 0;
}
.slide{
width: 100px;
height: 100px;
display: inline-block;
font-size: 20px;
}

效果图如图1-3所示



图1-3

注意，要在子元素的里面再次给字体设置大小，不然会继承父元素的字体大小，不能正常显示。

写的不好，见识粗鄙，还望见谅。