如果您将以下HTML：http://pastebin.com/zBkzGysw复制到文本编辑器中并在浏览器中进行测试，您会看到黄色框的高度很高！这是因为它有一类clearfix并且正在从左侧的侧边栏中清除。
如何阻止这种情况发生？
我尝试在中间列上使用overflow:hidden;，但这意味着如果我有一个包含长内容的表，它将会被切断！另外，为什么这样做时会在右侧使用margin-left添加边距？
答案 0 :(得分：0)
尝试在display: inline-block; div：
Middle
.Middle
{
margin-left: 220px;
display: inline-block;
}
您可能还需要为其指定width以获得您所需的布局。
的更新
我找到了一种方法来获得我认为你想要的布局行为，但我已经通过剥离clearfix样式来完成它。这更接近吗？
<!doctype html>
<html lang="en">
<head>
<title>Test</title>
<style type="text/css">
body
{
margin:0;
padding:0;
}
.MainContent
{
margin: 20px;
width:200px;
}
.Middle
{
margin-left: 220px;
margin-top: -300px;
vertical-align: top;
float: left;
}
*/
</style>
</head>
<body>
<div class="MainContent clearfix">
<div style="width:200px;float:left;">
<div style="height:300px;background:blue;"></div>
</div>
<div class="Middle">
<div style="padding:20px;background:red;">
<div style="padding:10px;background:yellow;margin-bottom:20px;height:20px;">
<div style="float:left;height:20px;width:300px;background:green;"></div>
<div style="float:right;height:20px;width:300px;background:green;"></div>
</div>
<table style="border:#000 1px solid;">
<tr>
<td>ioruturiotueorit eiortueriotuoeotigggggggggggggggggggggggggggggggggggggggggggggggggggggggieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoetuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td>
<td>ioruturiotueorit eiortueriotuoeotiieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoeteeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td>
<td>ioruturiotueorit eiortueriotuoeotiieruter tiouriotueroutoerutiuerteorituero tuioerutioeriotueroutoeruto eroturoetuoerutqe;ruqe; rty80yuto;eqotouyt4uyity 4iltyilytilryterutyertuyertuyert erut uerytierutyerutylerytelryltylert qerytuiertyileqrtyuqet</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>