容器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