Question

我有一个明确的浮动问题，我无法弄清楚。这是HTML代码：

 <div id="main">
   <div id="primary">
      <div id="content" role="main">
      </div><!-- #content -->
   </div><!-- #primary -->
   <div id="secondary">
   <div><!-- #secondary -->
 </div><!-- #main -->

这是每个元素的CSS：

#main {
clear: both;
}

#primary {
float: left;
width: 100%;
margin: 0 -40% 0 0!important;
}

#content {
background: none repeat scroll 0 0 white;
box-shadow: 0px 10px 10px 2px #888;
float: left;
margin: 0 12.3%!important;
position: relative;
width: auto;
 }

#secondary {
float: right;
margin-right: 15%;
width: 22%;
position: relative;
padding-top: 170px;
}

该网站建立在wordpress上，因此main从header.php开始，以footer.php结尾。 primary和content div在每个页面模板中开始和结束，并在secondary div结束后在每个页面模板（获取侧边栏）中调用primary div。

问题是内容div在主div结束后立即停止，而辅助div继续在下面延伸。内容div应该延伸到二级或主要div结束的文档末尾。

您可以在website上查看实时代码及其导致的问题。

Answer 1

因为float

将overflow property提供给您的父母。

或创建一个额外的div并提供clear:both

使用基于浮动的布局进行编码时遇到的一个常见问题是包装器容器没有扩展到子浮动元素的高度。修复此问题的典型解决方案是添加一个{{1}的元素在浮动元素之后或向包装器添加clear float。但您也可以使用overflow属性来解决此问题。这也不是一个新的CSS技巧。很久以前就已经有人记录过了。

Answer 2

父元素永远不会展开以包含浮动元素。要使该元素展开以包含它们，可以将overflow: auto添加到父元素中，以便在大多数情况下包含溢出元素的浮动元素。我无法找到一个元素来应用它，所以你可能已经做了其他事情来导致这个。 position：absolute具有相同的问题，它从正常流中取出，而父元素不包含它们。

Answer 3

css中的clear属性需要应用于代码中的新div。它的工作原理是在父元素中的所有浮动元素下面启动div。它看起来像这样：

<div id="main">
  <div id="primary">
    <div id="content" role="main">
    </div>
  </div>
  <div id="secondary">
  <div>
  <div style="clear: both"></div> <!-- Don't do inline styles -->
</div>

应该这样做。您还应该在clear: both CSS上取出#main's。没有必要。

Answer 4

我认为问题在于，“辅助”元素未包含在您网站的“内容”元素中，所以很明显“内容”不会增长到适应“辅助”。

您需要重新考虑您的html结构。

css - clear floats不起作用

4 个答案: