float和inline-block的使用 使用float会出现排版问题

各位大虾帮忙！

<footer>
<div>
每页显示 <select name="" id=""><option value="">20</option><option value="">40</option></select>行
</div>
<div>
<dl>
<dt><</dt>
<dt>1</dt>
<dt>2</dt>
<dt class="currentPage">3</dt>
<dt>4</dt>
<dt class="noborder">……</dt>
<dt>86</dt>
<dt>></dt>
</dl>
</div>
<div>
共<span >100</span>页,到第 <input type="text" />页 <input type="button" value="确定" class="okBtn"/>
</div>
</footer>

相关的一些css:
footer{
height: 45px;
}
footer div{
display: inline-block;
height: 45px;
line-height: 45px;
}
footer dl{
margin: 0px 0px 0px 223px ;
}
footer dl dt{
float:left;
width:20px;
height:20px;
border:1px solid #D6D6D6;
text-align: center;
padding-right:5px;
line-height: 20px;
margin-right:5px;
}
运行结果：

会发现dl比其他两个div要高出一块

如果改成
footer dl{
margin: 0px 0px 0px 223px ;
display: inline-block;
}
footer dt{
float:left;
width:20px;
height:20px;
border:1px solid #D6D6D6;
text-align: center;
padding-right:5px;
line-height: 20px;
margin-right:5px;
}
运行结果：

只要把dl改成inline-block，三个div就水平对齐了

这是为什么？？是不是float的问题？？

inline-block和float的区别,什么时候使用
而inline-block由于未脱离文档流，不会出现这个问题。如果你想再创建一列图片时，不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动，当内容不断变化时这很容易产生bug。这里有个更明显的例子来体现inline-block跟float的区别：我制作了一个demo来展示一下两个写法效果的区别 上面...

inline-block和float的区别,什么时候使用
我们经常使用浮动，但浮动并不是唯一的解决方案。有时候inline-block会更好，特别是你想排列一些图片，或者横向排列链接时。Inline-block元素带有一些行内元素的特征（横向排列），同时内部也拥有块级元素的属性。这个跟浮动很类似，只不过有些区别。这些区别决定了你该使用哪种方案。如果你很纠结垂直对齐...

应不应该使用inline-block代替float
而inline-block由于未脱离文档流，不会出现这个问题。如果你想再创建一列图片时，不会受到上一列图片inline:block的影响。而你在使用时需要时刻注意清除浮动，当内容不断变化时这很容易产生bug。这里有个更明显的例子来体现inline-block跟float的区别：我制作了一个demo来展示一下两个写法效果的区别 上面...

html需要设置三个一样高的div并排 属性float:left,结果排列顺序错乱了...
float浮动不能用于多个div使用，如果三个并排使用magin-left控制距离

如何解决子div设置float后会导致父div无法自动撑开的问题
原因：内部的p因为float:left之后，就丢失了clear:both和display:block的样式，所以外部的p不会被撑开。以下是几种解决办法（假设父p的class为“container”）:方法1、使用伪类container::after{ display: block; height:0; content: ''; clear: both;}container{ display: inline-block; \/*第一种...

Html新手入门常见小问题及解决方法
我需要让三个子元素排成一行，已经都给float：left；了，但为什么没按照我想的来呢，于是我各种找原因，我试着给第三个子元素float：right；不行，然后又是转display：inline-block；还是不行，到底问题出在哪呢，我又检查了一遍我设的样式，这回终于发现问题所在了 原来是三个子元素宽的和超过了父...

浮动盒子的理解
除了块盒和行盒，还有一种盒子，就是行块盒(display:inline-block)，这种盒子结合了行盒和块盒的特点，它既有行盒的不独占一行，也有块盒的可以设置宽高，按理说这种盒子应该很受欢迎，但在实际开发中，我好像没怎么用过，具体原因，下面说。浮动盒子(float:left\/right)float:left 左浮动， 元素...

CSS当一个行内块元素后面紧跟着一个添加了浮动的元素,为什么这个浮动的...
当一个元素的 float 属性的值不为 none 时（即值为 left 或者 right ），这个元素将脱离“标准流”，变成“浮动流”。“浮动流”的元素会覆盖在“标准流”元素的上方。而当一个的 display 属性的值为 inline-block 时，这个元素就会开启一个 BFC （块级格式化上下文）BFC 元素不会被 浮动元素 ...

CSS为什么两个DIV使用FLOAT 会换行,不并列,急求答。谢谢
你好，你在CSS里面，.main .gn2，表示在mian类里的gn2生效， 你的HTML代码里面并没有main类，所以css所有样式都没有选择成功，把css里的.main全都去掉，就可以在同一行了，，下图是去掉.main后的效果。

如何解决inline-block元素的空白间距 css 完美解决
关于使用inline-block来代替float的讨论也蛮多的，最常说的就是使用inline-block来代替float进行布局，或者使用inline-block来实现元素的居中效果。前面《CSS3制作的分页导航》一文中就是使用的inline-block制作的居中效果，不过留下了一上问题，就是使用inline-block的元素之间会存在“4px”的空白间距。那么...