float导致外部容器高度无法自适应

让<a>标签显示再#left的右侧，写如下代码，想要#layout也被撑开，发现ie6，ie7正常，但ie8与ff中#layout的高度与a标签相同，没有被撑开。
例：
<div id="layout">
<div id="left">
<strong>XML</strong>
<p>前推荐遵循的是W3C于2000年10月6日发布的XML1.0和HTML一样，XML同样来源于SGML，但XML是一种能定义其 它语言的语。<br /><br /> XML最初设计的目的是弥补HTML的不足，以强大的扩展性满足网络信息发布的需要，后来逐渐用于网络数据的转换和描述。</p>
</div>
<a href="http://xiaogai1010.blog.163.com/blog/#">链接1</a>
<a href="http://xiaogai1010.blog.163.com/blog/#">链接2</a>
<a href="http://xiaogai1010.blog.163.com/blog/#">链接3</a>
<a href="http://xiaogai1010.blog.163.com/blog/#">链接4</a>
</div>
<style type="text/css">
<!--
a:hover {
background-color:#fff;
}
#layout {
border: #35bb0c 5px solid;
width: 400px;
background-color: #f2f2f2;
}
#left {
border: #d4ca25 5px solid;
width: 200px;
float: left;
background-color:#fff;
}
-->
</style>

解决方法：（与几种闭合浮动标签的方法相似）
（1）给#layout加属性：{float:left;}
（2）给#layout加属性：{overflow:hidden}
（3）给#layout加属性：{display:table}
（4）#layout:after{ content:"."; height:0; visibility:hidden; display:block; clear:both; zoom:1}
四种方法都可以使#layout被float元素撑开