inline-block与float

一、使用inline-block代替float

使用float的时候，有时有清除浮动等的问题，弄起来有点麻烦。inline-block这个属性可以模拟部分浮动的特征，而且不需要处理一些浮动带来的问题。

inline-block是什么？

inline-block兼并行内元素和块级元素的特征。

块级元素（block）：包含width，height，margin，padding，border，他们的排序方式是从上到下排列。

行内元素（inline）：排列方式是水平排列。

行内块元素（inline-block）：在行内的表现类似block元素。它拥有block元素的width，height，margin，padding，border，而排序方式类似inline。

inline-block和float的区别

文档流（Document flow）：浮动元素会脱离文档流，并使得周围元素环绕这个元素。而inline-block元素仍在文档流内。因此设置inline-block不需要清除浮动。

水平位置（Horizontal position）：定位类属性设置到父元素上，均不会影响父元素内浮动的元素。而子元素使用inline-block，父元素设置一些定位属性会影响到子元素

垂直对齐（Vertical alignment）：浮动元素紧贴顶部。inline-block元素沿着默认的基线对齐。可以通过vertical属性设置这个默认基线。

空白（Whitespace）：浮动元素会忽略空白节点，互相紧贴。inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。

解决inline-block元素的空白间距

 

    <ul>
        <li>首页</li>
        <li>关于我们</li>
        <li>客户服务</li>
        <li>产品专题</li>
        <li>活动专区</li>
    </ul>

 

 

*{
  margin: 0;
  padding: 0;
}
ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
}
ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  background: orange;
  padding: 5px;
}

上面的demo效果，明显的可以看出，在inline-block的元素之间存在“4px”的空白：

 

上面截图是：IE8-9、Firefox、Safari等浏览器下的效果，换句话说，这种现像只有在这几种浏览器中才会出现。下面我们就来说说解决这个“4px”(Chrome下是8px)的几种方法：

方法一：改变HTML结构

1.

    <ul>
        <li>
        首页</li><li>
        关于我们</li><li>
        客户服务</li><li>
        产品专题</li><li>
        活动专区</li>
    </ul>

2.

 

    <ul>
        <li>首页</li
        ><li>关于我们</li
        ><li>客户服务</li
        ><li>产品专题</li
        ><li>活动专区</li>
    </ul>

 

3.

 

    <ul>
        <li>首页</li><!--
        --><li>关于我们</li><!--
        --><li>客户服务</li><!--
        --><li>产品专题</li><!--
        --><li>活动专区</li>
    </ul>

4.

 

 

    <ul><li>首页</li><li>关于我们</li><li>客户服务</li><li>产品专题</li><li>活动专区</li></ul>

下面我们来看看按上述几种方法写的效果：
 

 

 

方法一所说的是通过标签来解决，虽然问题是解决了，但可以说不能称作是技巧。而且上面的方法只适合于写静态页面的时候，一旦你的HTML不是自己写，而是后台生成，就比如CMS来说，标签后台生成，此时，我想大家又要骂街了，这可怎么办？其实我们除了上面的方法，还可以使用CSS来解决的。

方法二：负的margin

 

ul {
		font-size: 12px;
	}
	ul li {
		margin-right: -4px;
		*margin-right: 0;
	}

这种解决方法并不完美，如果你的父元素设置的字号不一样，可能你的“-4px”就不能解决问题。况且在Chrome中你需要另外设置一个负的margin值才能实现同等的效果。

 

建议不使用负的margin来解决这样的问题。
 

方法三：设置父元素字体为0

第三种方法设置父元素的字体为“0”，然后在“inline-block”元素上重置字体需要的大小。

 

ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
	font-size: 0px;
    }
ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  background: orange;
  padding: 5px;
  font-size: 12px;
}

这样处理在Firexfox,chrome等浏览器下是达到了效果，可是在Safari下可问题依然存在：

 

 

 

按此来说，方法三也不是绝佳的好方法，用不用大家自己考虑

方法四：丢失结束标签

说实在的，这种方法又回到了方法一，在html标签上动手脚。就是让“inline-block”元素丢失关闭标签

 

    <ul>
        <li>首页
        <li>关于我们
        <li>客户服务
        <li>产品专题
        <li>活动专区
    </ul>

 

样式基本不变，我们来看看效果：

 

这种方法虽然能达到各浏览器的兼容，但还是有一个前提，那就是“DOCTYPE”要选择对，在“XHTML”下可就问题又出来了。

方法五：jquery方法

 

    <ul class="removeTextNodes">
        <li>首页</li>
        <li>关于我们</li>
        <li>客户服务</li>
        <li>产品专题</li>
        <li>活动专区</li>
    </ul>

 

 

 

ul {
  list-style: none outside none;
  padding: 10px;
  background: green;
  text-align: center;
  font-size: 12px;
}
ul li {
  display: inline-block;
  *display: inline;
  zoom: 1;
  background: orange;
  padding: 5px;
}

$('.removeTextNodes').contents().filter(function() {
    return this.nodeType === 3;
	}).remove();

最后一种方法是通过jQuery来改变“nodeType”的值，从而实现我们需要的效果。

 

 

全兼容的样式解决方法

在父元素中设置font-size:0,用来兼容chrome，而使用letter-space:-N px来兼容safari

 

.finally-solve {
  letter-spacing: -4px;/*根据不同字体字号或许需要做一定的调整*/
  word-spacing: -4px;
  font-size: 0;
}
.finally-solve li {
  font-size: 16px;
  letter-spacing: normal;
  word-spacing: normal;
  display:inline-block;
  *display: inline;
  zoom:1;
}

 

 

 

IE6和IE7：Ie67对此属性部分支持。

display:inline-block;*display:inline;zoom:1;

 

什么时候使用inline-block，什么时候使用float

使用inline-block：当你需要控制元素的垂直对齐跟水平排列时，使用inline-block。
使用浮动：当你需要让元素环绕某一个元素时，或者需要支持旧版本ie，或者不想处理inline-block带来的空白问题时，使用浮动。

浮动、inline-block和图像排列

若父元素中的图片等高，设置浮动就会工作正常。但一旦有一列图片比较高时，图片的排列就会出现问题。这是因为浮动后，图片脱离了文档流。

 

而inline-block由于未脱离文档流，不会出现这个问题。如果你想再创建一列图片时，不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动，当内容不断变化时这很容易产生bug。

 

 

添加微信交流群（需加微信拉您进入）