[让CSS更规范]两列的浮动布局

摘自《精通CSS:高级Web标准解决方案》

要想使用浮动创建简单的两列布局，首先需要有一个基本的(X)HTML框架。在下面的示例中，(X)HTML由品牌区域、内容区域、主导航区域和最后的页脚组成。整个设计包围在一个容器div中，这个div使用前面介绍的方法之一进行水平居中：

 
  ...

 
  ...

 
  ...

 
  ...

这个的设计的主导航区域将位于页面的左边，内容位于右边。但是，为了易用性和可访问性，在源代码中将内容区域主在导航的前面。首先，主内容是页面上最重要的东西，所以在文档中应该先出现。其次，这样可以方便屏幕阅读器用户，他们用不着经过可能很长的链接列表才找到内容部分。

在创建基于浮动的布局时，一般将两列都向左浮动，然后使用空白边或填充在两列之间创建一个隔离带。在使用这种方法时，列在可用空间内包得很紧，没有喘息的空间。如果浏览器表现良好的话，那么这不是问题：但是差劲的浏览器会打乱紧密的布局，迫使一列退到另一列的下面。

在IE上就会发生这种情况，因为IE/Win考虑元素内容的尺寸，而不是元素本身的尺寸。在符合标准的浏览器中，如果元素的内容太大，它只会超出框之外。但是，在IE/Win上，如果元素的内容太大，整个元素就会扩展。如果这发生在非常紧密的布局中，那么就没有足够的空间可以让元素并排出现，浮动元素之一就会退到下面去。其他IE bug（比如3像素文本偏移bug和双空白边浮动bug，见第9章）也会导致浮动元素下降。

为了防止发生这种情况，需要避免浮动布局在包含它们的元素中太挤。可以不使用水平空白边或填充来建立隔离带，而是将一个元素向左浮动，另一个元素向右浮动，从而创建视觉上的隔离（见图7-2）。如果一个元素的尺寸意外地增加了几个像素，那么它不会立刻占满水平空间并下降，而只是扩展到视觉隔离带中。

实现这个布局的CSS非常简单。只需为每列设置想要的宽度，然后将导航向左浮动，将内容向右浮动：

#content { 
 width: 520px; 
 float: right; 
 }
#mainNav { 
  width: 180px; 
  float: left; 
  }

然后，为了确保页脚正确地定位在这两个浮动元素的下面，需要清理页脚：

#footer { 
  clear: both; 
  }

基本的布局现在完成了。还需要做一些小调整以便让布局更有条理。首先，导航区域中的内容一直顶到容器的边缘上，这不太好看，需要留出点儿空间。可以直接在导航元素上添加水平填充，但是这会调用IE5.x专有的框模型。为了避免这种情况，将水平填充添加到导航区域的内容上：

#mainNav { 
  padding-top: 20px; 
  padding-bottom: 20px; 
  }

#mainNav li { 
  padding-left: 20px; 
  padding-right: 20px; 
  }

内容区域的右边也一直顶到容器的右边缘上，也需要留出点儿空间。同样并不把填充直接应用到元素上，是把填充应用到内容上，从而避免处理IE的框模型问题：

#content h1, #content h2, #content p { 
  padding-right: 20px; 
  }

现在完成了想要的效果： 一个简单的两列CSS布局（见下图）。