Почему поплавок мешает возврату строки блока дисплея

Question

Насколько я понимаю, блок display: автоматически начнется с новой строки.Почему блоки рушатся, когда в элементе div с display: block вводится float: left?Вот скрипка и ниже кода

#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="wrapper">
<div id="header">
     <div id="logo"class="left">left</div>
</div>
<div id="slogan">slogan</div>

Answer 1

Рекомендую ознакомиться с clearfix .Это облегчает жизнь.

Ваш пример (исправлен): http://jsfiddle.net/HkHTk/4/

Answer 2

Плавания перемещают элемент из нормального потока страницы. Если в потоке внутри содержащего элемента ничего не останется в , он «свернется».

Проверьте характеристики для получения дополнительной информации.

Answer 3

Это именно то, что происходит с float.

Распространенная проблема макетов на основе поплавка состоит в том, что контейнер поплавка не хочет растягиваться, чтобы вместить поплавки. Если вы хотите добавить, скажем, границу вокруг всех поплавков (то есть границу вокруг контейнера), вам придется каким-то образом дать команду браузерам растянуть контейнер до конца.

Исправление:

#wrapper {
    overflow: auto;
}

Демо: http://jsfiddle.net/mattball/CjXNW/

Answer 4

Что вы пытаетесь сделать? Если вы хотите, чтобы поле с надписью появилось под полем с логотипом, вам нужно добавить clear: both; к коду #slogan.

Answer 5

Вам нужно очистить ваш float, используя свойство CSS clear.