只是需要帮助,因为我一直在尝试排序这几年.我需要的：
我有一个2列布局,其中左列具有固定宽度220px,右列具有流体宽度.
代码是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Fluid</title>
<style type="text/css" media="screen">
html,body { background: #ccc; }
.wrap { margin: 20px; padding: 20px; background: #fff; }
.main { margin-left: 220px; width: auto }
.sidebar { width: 200px; float: left; }
.main,.sidebar { background: #eee; min-height: 100px; }
</style>
</head>
<body>
<div class="wrap">
<div class="sidebar">This is the static sidebar</div>
<div class="main">This is the main,and fluid div</div>
</div>
</body>
</html>
根本没有问题.当我使用css语法清除：在右列中,所有内容在左列之后移动.这是正确的行为,没有反对.
但是我非常需要使用清楚的方式：两者都保持在正确的列的上下文中(不会受到左列的影响,并且不会在下面移动)
有没有简单的介绍,保留页面设计的基本浮动概念？
更新：请看这个链接,知道我在说什么,因为它可能有点混乱从我的描述.
链接：http://jsfiddle.net/k4L5K/1/
解决方法
这是你改变的CSS：
html,body {
background: #ccc;
}
.wrap {
margin: 20px;
padding: 20px;
padding-right:240px;
background: #fff;
overflow:hidden;
}
.main {
margin: 0 -220px 0 auto;
width: 100%;
float:right;
}
.sidebar {
width: 200px;
float: left;
height: 200px;
}
.main,.sidebar {
background: #eee; min-height: 100px;
}
.clear { clear:both; }
span { background: yellow }
基本上我做了什么是改变你的布局的方式,所以.main div浮动在右边.为此,我们不得不添加2件事情：
> .wrap div上的一个240px的填充,和
>在-2020px的.main div上的右边距,以正确对齐页面的流体部分.
因为我们已经把右边的.现在只需要影响.main div内的内容.
你可以在这里看到一个演示：http://jsfiddle.net/6d2qF/1/
