Why does float interfere with display block line return

It is my understanding that a display:block will automatically start in a new line. Why do the boxes collapse when a float:left is introduced inside a div with display:block? Here is a fiddle and below the code

#wrapper {
width:300px;
margin:0px auto;
text-align:left;
padding:15px;
border:1px solid #a39b8b;
background-color:#fff;
-moz-box-shadow: 0px 0px 10px #888;
-webkit-box-shadow: 0px 0px 10px #888;
box-shadow: 0px 0px 10px #888;}
#header { width: 100%; display: block; }
#logo { width: 100px; height: 145px; background: #fde; }
#slogan {
display: block; background: #f9ebcd; height: 35px; -moz-box-shadow: 0px 3px 10px #888;
-webkit-box-shadow: 0px 3px 10px #888; box-shadow: 0px 3px 10px #888; border: 1px solid red;
}
.left { float:left;}



<div id="wr开发者_如何学Goapper">
<div id="header">
     <div id="logo"class="left">left</div>
</div>
<div id="slogan">slogan</div>

Floats move an element out of the normal flow of the page. If there's nothing left in the flow inside a containing element, it will 'collapse'.

Check the specs for more info.

I recommend you familiarize yourself with clearfix. It makes life easier.

Your example (revised): http://jsfiddle.net/HkHTk/4/

That's just what happens with float.

A common problem with float-based layouts is that the floats' container doesn't want to stretch up to accomodate the floats. If you want to add, say, a border around all floats (ie. a border around the container) you'll have to command the browsers somehow to stretch up the container all the way.

The fix:

#wrapper {
    overflow: auto;
}

Demo: http://jsfiddle.net/mattball/CjXNW/

You need to clear your float using the CSS clear property.

What are you trying to do? If you want the slogan box to appear beneath the logo box, you need to add clear:both; to the #slogan code.