在进行网页布局时，浮动（float）是一种非常重要的CSS布局技术，它能够让元素脱离文档流，并且向左或向右移动，直到它的外边缘碰到包含框或另一个浮动元素的边缘为止。这种技术在创建导航栏时尤其常见，通常我们会给导航栏中的每一个链接元素设置float:left属性，使得它们能够水平排列。
然而，使用float:left属性带来的一个问题是，它会让包含这些元素的父容器（比如<ul>标签）无法自动扩展以包含这些浮动元素，从而无法实现水平居中对齐。因为浮动元素脱离了文档流，父容器无法识别其宽度，所以父容器的宽度将保持其原始宽度，通常是0。
为了解决这个问题，我们可以采用display:inline-block属性。这个属性可以使得元素既能够像内联元素（如<span>）一样排列，又能像块级元素（如<div>）一样拥有宽度和高度。当设置ul为display:inline-block时，ul就能够适应内部浮动元素（li）的宽度，同时又保持其宽度，使得整个ul能够居中显示。
但是，使用display:inline-block属性也有其弊端。当多个内联块级元素（如inline-block的li元素）在同一行显示时，它们之间可能会出现不可预期的空白间隙。这是因为HTML文档中空白字符（包括空格、换行符、制表符等）也会被视为元素，产生空白间隙。
为了解决这个间隙问题，我们可以采用一种常用的技巧：在<ul>元素的CSS样式中添加font-size:0。这样做可以消除ul中子元素间隙的影响，因为所有的空白字符将不会产生间隙。然后，我们再为每个<li>元素单独设置字体大小，恢复其正常的字体大小。
结合上述两种技术，我们就可以实现一个既能水平排列又能水平居中的导航栏。具体代码示例如下：
```css
ul {
display: inline-block;
font-size: 0; /* 消除内部间隙 */
text-align: center; /* 使内部的li元素水平居中 */
}
li {
display: inline-block; /* 保持块级特性 */
font-size: 12px; /* 恢复正常的字体大小 */
float: left; /* 左浮动 */
/* 其他样式 */
}
```
在上述代码中，我们使用了display:inline-block来让<ul>元素能够包裹浮动的<li>元素，并使其在父容器中居中。同时，我们通过设置<ul>的font-size为0来消除因空白字符产生的间隙，并为每个<li>单独设置字体大小。此外，设置body元素的text-align属性为center，可以让<ul>元素中的<li>元素实现水平居中。
通过上述方法，即使是在老版本的IE浏览器（如IE6、IE7和IE8）中，我们也能实现一个既美观又实用的导航栏布局。这种方法的核心思想是将浮动和内联块级元素的特性相结合，利用CSS的不同属性来解决布局中的矛盾问题。
