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

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

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