css - float : left makes clear: both stretch div to full height

Question

我正在创建一个全宽网站，其中有一个标题、一个左侧边栏，其余是主要内容。 它应该看起来像这样:

+--------------------------------+
|  header                        |
+---------+----------------------+
|         | div1                 |
| sidebar | div2                 |
|         |                      |
|         |                      |

html 和 css 看起来像这样(但有更多元素):http://jsfiddle.net/7QJC5/

如您所见，如果我将侧边栏设置为 float: left，清除的 div1 会延伸到全高。 我通过手动定位侧边栏找到了解决方法:

position: absolute;
top: 60px;
bottom: 0;
left: 0;

但我不确定这是最好的解决方案。

谁能解释为什么会这样，我该如何解决，或者 position: absolute 方法可以吗？

Answer 1

对于你的两个问题:

1. 您可以将overflow:hidden; 添加到#content。所以你的 clearfix 规则 on child 将仅在 #content 内应用，不会介意 不再是你的 float 侧边栏了 : DEMO

   让它变得简单，触发布局。搜索处理 float 元素。有很多方法取决于你看的结果 对于.

2. 对于滚动条，切换到另一个盒模型以将填充包含在 100% 中；高度，添加:box-sizing:border-box 到 #main。 <强> DEMO