Container div doesn't surround it's floating child elements. How can I fix this? [duplicate]_问答_开发者

Container div doesn't surround it's floating child elements. How can I fix this? [duplicate]

开发者 https://www.devze.com 2022-12-08 01:28 出处：网络

This question already has answers here: css background color with floating elements (5 answers) Closed 6 years ago.

相关专题：css xhtml

This question already has answers here: css background color with floating elements (5 answers) Closed 6 years ago.

I've a XHTML structure like this:

<?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" and "Fusszeile" are both block elements (display:block;). The additional container div "Mitte" is mainly there for margin/padding and background image reasons. The CSS for "Navigation" and "Inhalt" looks like this:

div#Navigation {
float: left;
}

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

The result is that the floating navigation list sticks out of the "Mitte" div. How can I fix this?

You need a clear fix. See this page for one solution that doesn't require extra markup.

Their example code:

<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]-->

Just copy the CSS to your project and add a .clearfix class to the #Navigation element and you'll be all set.

Floating elements doesn't affect the size of the parent. Add a clearing div at the bottom of Mitte:

<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; }

(The overflow setting is so that IE doesn't make the element larger than specified.)

Edit:

The way that I use nowadays, is to set the overflow style on the contaner. Simply add this to the style sheet:

#Mitte { overflow: hidden; }

Since there is no size specificed on the element, there isn't any content that actually will overflow, but the setting will make the element contain its children.

The advantage of this method is that it's well defined in the standards and works in all browsers. There is no extra element needed, and no hack or browser specific code needed.