如何确定为什么浮动元素会影响非浮动元素的高度（D7 以 zen 主题查看块）？

Question

我正在使用 7.x-56 zen 子主题更新基于 D7 构建的网站。主题布局为响应式水平堆叠的内容区域。我创建了一个自定义博客内容类型，以及基于分类、存档和最近帖子的三个视图块，但我在内容区域内的各个块的布局方面遇到了问题。

我想要的是三个博客内容过滤块堆叠并向右浮动，而博客本身向左浮动。我或多或少地完成了这个，但是浮动和清除块以堆叠在一起，但我遇到的问题是它们以某种方式影响了第一篇博文的高度。 那么，为什么浮动元素会影响视图行的高度，我该如何解决呢？您可以在此处enter link description here 看到该网站的实时版本。对于上下文，页面是从自定义内容类型构造的视图，过滤器视图使用上下文模块放置，行高为 -9。 我应该在这里添加一个侧边栏区域吗？或者是否有针对此的 css 修复？

Answer 1

我会给主博客区域一个宽度 %，然后将其浮动到左侧。对于右侧堆叠的 div，我会将它们全部放在一个 div 中，将该 div 浮动到右侧，然后给该 div 一个宽度 %。

然后确保将包含这两个div的div设置为“overflow:auto”；

#main {
  overflow:auto;
}

#left {
  float:left;
  width:65%;
}

#right {
  float:right;
  width:30%;
}

<div id="main">
    <div id="left"></div>
    <div id="right">
        <div id="box-1"></div>
        <div id="box-2"></div>
        <div id="box-3"></div>
    </div>
</div>