inline-block之妙用

首先解释一下inline-block，在w3c school中定义：行内块元素。（CSS2.1 新增的值）

什么叫行内块元素呢？

来看看英文版的定义，我觉得这个比较明确，暂时在中文版上没找到

inline-block elements are like inline elements but they can have a width and a height.

大概意思也和这个属性的名字差不多，就是说设置了inline-block属性的元素具有行内元素的性质，但是却可以设置宽和高，因为我们都知道行内非替换元素是不能设置宽和高的，行内替换元素本身的默认属性就是：inline-block（关于行内非替换元素详见非行内元素与行内元素转换的几种方法）

咳咳，汇成一句话就是：属性inline-block 的元素既具有 block 元素可以设置宽高的特性，又具有 inline 元素默认不换行的特性。当然inline-block 元素还可以设置 vertical-align等属性（好像又说多了...）

接下来看看inline-block经常在浮动中的用法：

inline-block常常会使浮动变得容易很多，例如下面这个例子：

.floating-box {
    float: left;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

.after-box {

    border: 3px solid red; 
    clear: left;
}

这是一个普通的利用float来做的例子，效果如图：

而如果使用inline-block的话就不用去浮动再去清除浮动，即可以实现相同的效果la~

.floating-box {
    display: inline-block;
    width: 150px;
    height: 75px;
    margin: 10px;
    border: 3px solid #73AD21; 
}

<pre name="code" class="css">.after-box {

    border: 3px solid red; 

}