html - 显示容器背景的问题

Question

我正在做一个内页，它是http://www.kaniamea.com/fern/inner.html .容器 id="inner"中的背景不显示。在我将 id="inner-left"和 id="inner-right"添加到页面后，它就崩溃了。 id="inner-left 是 float:left，所以当我删除它时，背景又回来了，但右面板在左面板下面，这不是我想要的。知道可能出了什么问题吗？非常感谢!

Answer 1

漂浮的东西使它们脱离了正常的内容流。结果，父容器在计算它应该占据的高度时不再允许它们。

id = "inner"的父 div 只包含这两个 div "inner-left"和 "inner-right"。所以一旦你 float 它们，父 div 实际上就没有任何内容了，因此不再需要占用任何高度。因此它降低到零高度，并且它(和它的背景)不再可见。

修复它的一种方法是在父容器内添加另一个 div，但在左内和右内 div 之后，并在 css 中为其指定属性 clear:both:-

html:  <div class="clearboth"></div>

css:   .clearboth { clear:both };

Clear both 使它位于两个 float div 的下方，然后这会强制父 div 展开以容纳此 div。

另一种方法是，在 CSS 中，为父容器指定样式:overflow: hidden。