容器div不正确…包含

Question

当我在页脚中放置快速模拟时，我只是注意到这一点。 我的.container像这样坐在页面顶部（萤火虫中绿色突出显示）：

在此处输入图片说明

这是我的布局文件：

<body class="<%= controller_name %>">
<%= render 'layouts/header' %>

<div class="container">
  <%= render 'shared/alerts' %>
  <div class="main">
    <%= yield %>
  </div>

  <div class="sidebar">
    <%= render 'layouts/sidebar' %>
  </div>
</div>

<%= render 'layouts/footer' %>
</body>

这表明它已正确打开和关闭。

唯一应用的CSS是这样的：

.container {
  margin: 0 auto;
  margin-top: 65px;
}

以及媒体查询中特定于浏览器宽度的宽度大小。

这意味着从布局角度来看，页脚在技术上是页面上的最后一件事，因此像这样到达顶部，因为它位于容器下方。 但是奇怪的是，.container内部的所有内容都适当地以margin：0为中心。 我不知道发生了什么事。

Answer 1

我的猜测是，在页眉和页脚之间有一些浮动的块级容器，并且没有清除浮动。

结果，页脚内容环绕最右边浮动的div。

您可能需要在侧边栏元素之后清除浮点数。

可以肯定的是，我需要查看更多的HTML / CSS，但该图像提供了很好的线索。

作为快速解决方案，您可以尝试将overflow: auto添加到footer容器的CSS规则集中。

Answer 2

您需要“清除浮标”。

例如，当一个元素为float:right ，它在某种程度上已从布局流程中移除。 除非这些内容也向右浮动或clear:right ，否则它不会下推其下方的任何内容（包括其包含元素的底部）。 克莱尔基本上说：“好的，尊重所有这些浮动的东西的底部”。

clear:both都是最常使用的，并且按照它说的去做。

克里斯·科耶尔（Chris Coyier）在本文中对此进行了介绍。

如果您经常在布局中遇到这种问题，也可以自己构建一个“ Clearfix”。 这里有很多方法可以做到这一点。

容器div不正确…包含

问题描述

2 个解决方案

解决方案1
1 2014-06-29 01:57:55

解决方案2
1 已采纳 2014-06-29 03:05:19

容器div不正确…包含

问题描述

2 个解决方案

解决方案1 1 2014-06-29 01:57:55

解决方案2 1 已采纳 2014-06-29 03:05:19

解决方案1
1 2014-06-29 01:57:55

解决方案2
1 已采纳 2014-06-29 03:05:19