Question

我有一个像这样的XHTML结构：

<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Titel</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>

<div id="Seite" class="bgr">
<div id="Titel" class="bgr">
<h1>some titel</h1>
</div>

<div id="Mitte" class="bgr">
<div id="Navigation" class="bgr">
<ul>
<li><a href="link.html" class="aktiv"><img src="text.gif" alt="[Link]" /></a></li>
</ul>
</div>

<div id="Inhalt" class="uebersicht bgr">
Content
</div>
</div>

<div id="Fusszeile" class="bgr">
</div>

</div>

</body>
</html>

“Titel”和“Fusszeile”都是块元素（display:block;）。额外的容器div“Mitte”主要用于保证金/填充和背景图像的原因。 “导航”和“Inhalt”的CSS看起来像这样：

div#Navigation {
float: left;
}

div#Inhalt {
margin: 0 0 1em 185px;
padding: 0 1em;
}

结果是浮动导航列表突出了“Mitte”div。我该如何解决这个问题？

Answer 1

您需要一个明确的解决方案。有关一个不需要额外标记的解决方案，请参阅this page。

他们的示例代码：

<style type="text/css">

  .clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
    }

.clearfix {display: inline-block;}  /* for IE/Mac */

</style><!-- main stylesheet ends, CC with new stylesheet below... -->

<!--[if IE]>
<style type="text/css">
  .clearfix {
    zoom: 1;     /* triggers hasLayout */
    display: block;     /* resets display for IE/Win */
    }  /* Only IE can see inside the conditional comment
    and read this CSS rule. Don't ever use a normal HTML
    comment inside the CC or it will close prematurely. */
</style>
<![endif]-->

只需将CSS复制到您的项目中，然后将.clearfix类添加到#Navigation元素中，您就可以全部设置。

Answer 2

浮动元素不会影响父级的大小。在Mitte底部添加一个清算div：

<div id="Mitte" class="bgr">
<div id="Navigation" class="bgr">
<ul>
<li><a href="link.html" class="aktiv"><img src="text.gif" alt="[Link]" /></a></li>
</ul>
</div>

<div id="Inhalt" class="uebersicht bgr">
Content
</div>
<div class="Clear"></div>
</div>

CSS：

.Clear { clear: both; height: 0; overflow: hidden; }

（溢出设置是因为IE不会使元素大于指定的值。）

编辑：

我现在使用的方式是在容器上设置overflow样式。只需将其添加到样式表中：

#Mitte { overflow: hidden; }

由于没有特定于元素的大小，因此没有任何内容实际上会溢出，但该设置将使元素包含其子元素。

这种方法的优点在于它在标准中得到了很好的定义，并且适用于所有浏览器。不需要额外的元素，也不需要hack或浏览器特定的代码。

容器div不包围它的浮动子元素。我怎样才能解决这个问题？

2 个答案:

编辑：