положение и размерность элементов после плавающего элемента

Question

Я разработал изображение с помощью float: left и, как и ожидалось, текста заголовка после того, как он появляется справа от изображения (если это помогает, контекстом для этой ситуации является логотип и заголовок рядом друг с другом в заголовок сайта).

Когда я смотрю на элемент заголовка (h1), он занимает место позади изображения (перекрытие). Текст по-прежнему находится рядом с изображением, но фон элемента h1 перекрывается с изображением.

<div id="header">
  <a href="index.html"><img src="logo2.png" /></a>
  <h1>AlanHoRizon</h1>
  <p>
...
#header img {
    float: left;
}

Это как плавающий должен работать? Является ли фон синонимом заполнения в модели css box? Что, если бы я хотел, чтобы элемент заголовка начинался полностью после изображения, включая фон (что я и ожидал на самом деле делать float).

На самом деле не влияет на внешний вид заголовка, так как все выглядит так, как должно, но мне любопытно, так как это добавило бы мое понимание веб-дизайна html и css.

спасибо.

Answer 1

HTML:

<div id="header">
    <a href=""><img id="logo" src="http://lorempixum.com/100/100/abstract" alt="" /></a>
    <div>
        <h1>AlanHoRizon</h1>
        <h3>Site description</h3>
    </div>
</div>
<div id="content">
    <p>Lorem ipsum dolor ...</p>
</div>

CSS:

#header:after {
    display: block;
    clear: both;
    content: ".";
    visibility: hidden;
    height: 0; 
    line-height: 0;
}
#logo {
    float: left;
}
#header div {
    float: left;
    padding: .25em;
}

А вот полный пример jsfiddle

Answer 2

На самом деле, я думаю, что нашел ответ на свой вопрос.Проще говоря, похоже, что именно так работает плавающее поведение.Контент перемещается, но фон и границы остаются за плавающей точкой:

http://phrogz.net/CSS/understandingfloats.html#ascolumns

Я не уверен, является ли отступ синонимом фона, но я проверял заголовокэлементы "padding" просто делают фон красным цветом, а фон действительно находится за плавающей точкой.Что касается модели css box, я все еще не совсем уверен, что происходит.

Answer 3

изменить код CSS на:

h1
{
float:left;
}
img
{
float:left;
}

Это должно работать. Следующее создаст заголовок слева от изображения.