如何确定为什么浮动元素会影响非浮动元素的高度（D7视图块具有禅主题）？

Question

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

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

Answer 1

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

然后确保将包含这两个div的div设置为＆＃34; overflow：auto＆＃34 ;;

#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>