Тег изображения в переполнении div

Question

Я создавал простой HTML с заголовком и логотипом. Я делаю это для шаблонов электронной почты, так что все встроенные стили. Я заметил, что происходит разрыв поплавка, и изображение переполняет его родителя.

<div style="width:640px;">
        <!--  header -->
        <div id="header" style="background-color:#005387; height:160px;">
            <div id="logo-container" style="margin-top:20px;margin-left:20px;">
                <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw">
            </div>
        </div>
    </div>

http://jsfiddle.net/HMswX/8/

Есть идеи, почему это происходит? Когда я добавляю переполнение: скрытое в #header elem, оно работает нормально. Но я не плаваю в этом элементе, тогда почему разрыв?

РЕДАКТИРОВАТЬ:

Окей, я не был достаточно ясен. Обновил код. Я хочу добавить margin-top в # logo-container. Но когда я это делаю, весь div выходит из строя, как будто #header не находится в нормальном потоке (что я имел в виду под float-break, который обычно происходит, когда мы плаваем элементы внутри родителя).

Answer 1

Почему бы просто не указать высоту на img?

<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcTPCYwy-3sPJo4XjlB28KVXivC2FlDjYquB1i5Kb7assH9trLoanw" height="60px">

http://jsfiddle.net/HMswX/2/

В противном случае просто не указывайте высоту заголовка.

http://jsfiddle.net/HMswX/3/

---

На основании вашего обновления..

Маржа не работает, потому что div рушится.. посмотри на это:

Плавать div.. http://jsfiddle.net/HMswX/10/

Применять overflow:auto.. http://jsfiddle.net/HMswX/12/

---

Если вы хотите узнать больше о разрушении divs увидеть этот пост тот же вопрос..

Почему этот CSS-стиль не работает?

Answer 2

У JoshC есть правильный ответ на ваш вопрос о том, почему это происходит.

Для желаемого эффекта, почему бы просто не добавить дополнение к родительскому div?

<div id="header" style="background-color:#005387; padding:20px">
            <div id="logo-container">

http://jsfiddle.net/HMswX/13/

Это избавляет вас от необходимости устанавливать явную высоту.

Answer 3

Потому что вы определили в div с id=header:

height:60px;

Вы хотите, чтобы изображение уменьшилось или каков ваш желаемый результат?

Answer 4

Я не уверен, что вы подразумеваете под разрывом числа, но вы указываете height в вашем #header которая меньше, чем высота вашего изображения. Таким образом, по умолчанию он будет переполнен. Если вы укажете overflow:hiddenбудет отрезано. Почему бы не удалить height и указать overflow:auto в вашем #header? Альтернатива уменьшить размер вашего изображения, давая ему height, тоже.

Смотрите jsFiddle 1 и jsFiddle 2.