Добавление float: left или float: right к элементу продвигает его в максимально возможной степени выбранной стороне потока документации. Несколько элементов, пущенных в ход в том же направлении, сложат друг на друге. Плавание чрезвычайно полезно для расположения элементов на странице, но также склонно создать несколько интересных проблем расположения. clear свойство является связанным атрибутом, иногда раньше решал плавающие проблемы.

Плавание направо - назад эффект

При плавании нескольких элементов к правой стороне документа необходимо будет перечислить их в обратном порядке, что Вы хотите, чтобы они появились. Это происходит, потому что первый элемент, найденный в документе, пускается в ход направо сначала. Следующий, который пускается в ход направо, сложен сверху предыдущего элемента, сложив налево. Каждый элемент после того, как это складывает налево сверху других.

Назад эффект также частично расширяется на элементы, которые пускаются в ход направо на той же строке с элементами, пущенными в ход налево. Любые элементы, которые Вы хотите пустить в ход непосредственно направо от лево-пущенных в ход элементов, должны быть помещены перед пущенными в ход налево. Иначе пущенные в ход правом элементы могут закончиться на строке ниже.

Удаление из Потока Документа

Один из разработчиков главных проблем склонен иметь, то, что пущенные в ход элементы удалены из потока документа. Это означает, что они не занимают места вообще, и вертикально и горизонтально. Другие элементы расширятся позади них, и только текст перенесет их. Прежде всего Вы будете видеть, что пущенное в ход содержание расширяется вниз мимо края его родительского контейнера. Возьмите, например, зеленый контейнер с дополнением 20 пкс, которое содержит красный контейнер, который пускается в ход налево:

Так как пущенный в ход элемент на самом деле не занимает места, родительский контейнер имеет расчетную высоту 0 плюс 40 пкс дополнения (вершина и нижняя часть), который создает это отрицательное воздействие. Фиксация этого проста, все же. Можно или добавить overflow: hidden к родительскому контейнеру (который будет работать в большинстве случаев) или используют ясное - фиксируют на родительском элементе (только для CSS3-совместимых-браузеров).

.parent:after { clear: both; content: "."; display: block; font-size: 0; } 

Посмотрите псевдотег элементов Wiki для получения дополнительной информации после :after селектор.

Очистка пущенных в ход элементов

Можно очистить элементы, которые пускаются в ход к left, right, или both стороны. Следует иметь в виду, что очистка пущенных в ход элементов очистит все элементы указанным сторонам (сторонам). Можно не только очистить один или два элемента за один раз с этим свойством. Кроме того, необходимо иметь в виду, что это будет только влиять на те элементы, которые на самом деле пускаются в ход в том направлении. В случае, где элемент, пущенный в ход налево, сложен между двумя другими элементами, пущенными в ход налево, Вы не можете применить a clear: right к тому элементу для очистки лево-пущенного в ход элемента, который сложен с его правой стороны от него.

Ссылки

• W3C: спецификация CSS 2.1: 9.5 Плавания
• W3C: CSS основная модель поля: 10. Плавание полей
• W3CWiki: Плавания и очистка

Дополнительная информация

• Все о плаваниях