Элементы блока CSS в строке

Родительский контейнер не растягивается вместе с ними, если ему также не назначен тег с плавающей запятой или нет br с clear: both; внизу.

Я бы пошел с float: left вместо позиционирования. Браузер выполняет все выравнивание, когда один объект растягивается. Так что вам будет меньше забот.

Я думаю, что я бы не стал позиционировать элементы явно, а скорее проинструктировал бы браузер использовать встроенный макет для элементов с помощью display: inline и позволить браузеру обрабатывать позиционирование.

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

Я думаю, что с помощью свойства float браузер решает проблемы с изменением размера за вас и повторно отображает элемент в нужном месте.

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

Плюсы позиционирования:

• очень точное позиционирование по отношению к следующему предку, отмеченному как относительное положение - обеспечивает большую гибкость
• позволяет визуально располагать элементы в другом порядке, чем в DOM

Минусы позиционирования:

• Труднее выровнять с другими элементами, поскольку позиционированный элемент больше не находится в потоке документов, а также из-за требуемого уровня точности.
• Другие элементы игнорируют абсолютно позиционированный элемент, что означает возможное перекрытие, если вы не учитываете минимальный и максимальный размер позиционируемого элемента.
• сложнее реализовать нижний колонтитул, если вы используете абсолютное позиционирование для своих столбцов.

Плюсы поплавка:

• действительно легко создавать простые и продвинутые макеты
• нет проблем с нижним колонтитулом
• не беспокойтесь о точности, браузер позаботится об этом за вас
• родительский контейнер растягивается

Минусы поплавков:

• Множество ловушек для тех, кто менее опытен с макетами поплавков, которые могут привести к множеству вопросов, которые задают SO :)

Что касается ясности: оба элемента, упомянутые Себастьяном, есть простой способ обойти это. Допустим, у вас есть контейнер div и 2 плавающих div внутри.

HTML:

<div id = "con">
    <div class = "float"></div>
    <div class = "float"></div>
</div>

CSS:

#con { background:#f0f; }
.float { float:left; width:100px; height:100px; background:#0ff; }

если бы вы запускали этот код, вы бы заметили, что контейнер div (пурпурный) имеет высоту всего в один пиксель, тогда как плавающие div были правильными - это проблема, о которой упоминал Себастьян. Теперь вы можете последовать его совету и добавить в контейнер br или float, что было бы не очень семантически - так что вот немного более элегантное решение. Просто добавьте overflow: hidden; в контейнер div так:

#con { background:#f0f; overflow:hidden; }

Теперь ваш контейнер должен правильно обернуть плавающие блоки.

Единственным недостатком плавания в подобных ситуациях для меня было то, что вам нужно было либо выровнять их по левому краю, либо по правому краю - центрирование не вариант. Однако вы упомянули, что используете абсолютные значения для ширины, поэтому вы можете просто вложить все плавающие элементы в элемент DIV и добавить либо margin-right, либо margin-left к родительскому DIV, чтобы имитировать выравнивание по центру.

Что ж, если вы не слишком озабочены старыми браузерами (я смотрю на вас, IE6), лучший способ здесь - пойти с

display:inline-block;

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