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

#html #css #css-float

#HTML #css #css-float

Вопрос:

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

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

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

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

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

Спасибо.

Ответ №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

Ответ №2:

измените код css, чтобы:

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

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

1. Интересно, сколько бы я ни читал о плавающем элементе, кажется, я все еще не до конца понимаю, как все это работает. Всегда есть чему поучиться. Что, если бы я хотел добавить описание сайта, которое идет под заголовком, но все равно сбоку от изображения? Будет ли это по-прежнему работать?

Ответ №3:

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

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

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