Понимание CSS Float

Свойство CSS является очень важным свойством для макета. Это позволяет вам позиционировать ваши проекты веб-страниц точно так, как вы хотите их отображать, но для их использования вы должны понимать, как это работает.

Свойство CSS float в таблице стилей выглядит следующим образом:

.right {float: right; }

Это говорит браузеру, что все с классом «справа» должно быть перемещено вправо.

Вы бы назначили его следующим образом:

class = "right" />

Что вы можете плавать с помощью свойства float CSS?

Вы не можете плавать каждый элемент на веб-странице. Вы можете только плавать элементы уровня блока. Это элементы, которые занимают блок места на странице, например images (), paragraph (), divisions () и lists ().

Другие элементы, которые влияют на текст, но не создают поле на странице, называются встроенными элементами и не могут быть размещены. Это такие элементы, как span (), разрывы строк (), сильное выделение () или курсив ().

Где они плавают?

Вы можете перемещать элементы вправо или влево. Любой элемент, который следует за плавающим элементом, будет обтекать плавающий элемент с другой стороны.

Например, если я плаваю изображение слева, любой текст или другие элементы, следующие за ним, будут перемещаться по нему вправо. И если я плаваю изображение вправо, любой текст или другие элементы, следующие за ним, будут течь вокруг него влево. Изображение, помещенное в блок текста без примененного к нему стиля float, будет отображаться, однако браузер настроен на отображение изображений. Обычно это первая строка следующего текста, отображаемого в нижней части изображения.

Как далеко они будут плавать?

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

• Если плавающий элемент не имеет предварительно заданной ширины, он будет занимать столько горизонтального пространства, сколько требуется и доступно, независимо от поплавка. Примечание. Некоторые браузеры пытаются размещать элементы рядом с плавающими элементами, когда ширина не определена - обычно дает неплаваемому элементу лишь небольшое пространство. Так что вы должны всегда определять ширину на плавающих элементах.
• Если элемент контейнера является элементом HTML, DIV будет сидеть на левом краю страницы.
• Если элемент контейнера сам содержит что-то еще, DIV будет сидеть на левом краю контейнера.
• Вы можете вложить всплывающие элементы, и это может привести к тому, что поплавок окажется в неожиданном месте. Например, этот float является левым плавающим DIV внутри правого DIV.
• Плавающие элементы будут сидеть рядом друг с другом, если в контейнере есть место. Например, этот контейнер имеет три ширины шириной 100 пикселей DIV элементы размещались в контейнере шириной 400 пикселей.

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

Выключение плавающего

Когда вы знаете, как получить элемент для плавания, важно знать, как отключить float. Вы отключите float с помощью свойства CSS clear. Вы можете очистить левые поплавки, правые поплавки или и то, и другое:

clear: left;ясно: правильно;ясно: оба;

Любой элемент, который вы установили для свойства clear, появится под элементом, который перемещается в этом направлении. Например, в этом примере первые два абзаца текста не очищаются, а третий.

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

HTML (повторите этот параграф):

Duis aute irure dolor sed do eiusmod tempor incididunt в reprehenderit в voluptate. Купидат не имеет значения, ut labore и dolore magna aliqua.

CSS (для размещения изображений слева):

img.float {float: left; ясно: левый; Маржа: 5px;}

И направо:

img.float {float: right; ясно: право; Маржа: 5px;}

Использование плавающих элементов для макета

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

• Разработайте макет (на бумаге или в графическом инструменте или в моей голове).
• Определите, где будут разделены страницы.
• Определите ширину различных контейнеров и элементов внутри них.
• Плавайте все. Даже самый внешний элемент контейнера перемещается влево, так что я знаю, где он будет связан с портом просмотра браузера.

Пока вы знаете, что ширина (в процентах в порядке) разделов макета, вы можете использовать поплавок чтобы разместить их там, где они принадлежат на странице. И самое приятное, вам не нужно беспокоиться о том, что модель коробки отличается от Internet Explorer или Firefox.