Содержание
Свойство CSS является очень важным свойством для макета. Это позволяет вам позиционировать дизайн веб-страниц именно так, как вы хотите, чтобы они отображались, но чтобы использовать его, вы должны понимать, как он работает.
В таблице стилей CSS свойство float выглядит так:
.right {float: right; } Это говорит браузеру, что все с классом «право» должно быть смещено вправо.
Вы бы назначили это так:
class = "right" />
Что можно плавать с помощью свойства CSS Float?
Вы не можете перемещать каждый элемент на веб-странице. Вы можете перемещать только элементы уровня блока. Это элементы, которые занимают блок пространства на странице, такие как изображения, абзацы, разделы и списки.
Другие элементы, которые влияют на текст, но не создают блока на странице, называются встроенными элементами и не могут быть перемещены. Это такие элементы, как span, разрывы строк, сильный акцент или курсив.
Где они плавают?
Вы можете перемещать элементы вправо или влево. Любой элемент, который следует за плавающим элементом, будет обтекать плавающий элемент на другой стороне.
Например, если вы перемещаете изображение влево, любой текст или другие элементы, следующие за ним, будут обтекать его вправо. И если вы перемещаете изображение вправо, любой текст или другие последующие элементы будут обтекать его слева. Изображение, помещенное в блок текста без примененного к нему стиля с плавающей точкой, будет отображаться, однако браузер настроен на отображение изображений. Обычно это с первой строкой следующего текста, отображаемой внизу изображения.
Как далеко они будут плавать?
Элемент, который был перемещен, переместится как можно дальше влево или вправо от элемента контейнера. Это приводит к нескольким различным ситуациям в зависимости от того, как написан ваш код. Для этих примеров вы будете плавать небольшой DIV элемент слева:
- Если плавающий элемент не имеет предопределенной ширины, он займет столько горизонтального пространства, сколько требуется и доступно, независимо от плавающего элемента.
Запись
Некоторые браузеры пытаются поместить элементы рядом с плавающими элементами, когда ширина не определена, обычно оставляя неплотнуемый элемент лишь небольшим пространством. Так что вы должны всегда определяйте ширину на плавающих элементах.
- Если контейнерный элемент является HTML-элементом, DIV будет сидеть на левом поле страницы.
- Если элемент контейнера сам по себе содержится чем-то другим, DIV будет сидеть на левом краю контейнера.
- Вы можете вкладывать плавающие элементы, и это может привести к тому, что поплавок окажется в удивительном месте. Например, это число с плавающей точкой слева DIV внутри право плавал DIV.
- Плавающие элементы будут сидеть рядом друг с другом, если в контейнере есть место. Например, этот контейнер имеет три 100px шириной DIV элементы плавали в контейнере шириной 400 пикселей.
Вы даже можете использовать поплавки для создания макета фотогалереи. Вы помещаете каждую миниатюру (она работает лучше всего, когда все они одного размера) в DIV с подписью и поплавком DIV элементы в контейнере. Независимо от того, насколько широко окно браузера, миниатюры будут выстраиваться равномерно.
Выключение поплавка
Когда вы знаете, как заставить элемент плавать, важно знать, как отключить его. Вы выключаете float с помощью свойства clear CSS. Вы можете очистить левые, правые или оба:
ясно: слева;
ясно: правильно;
ясно: оба;
Любой элемент, для которого вы установили свойство clear, появится под элементом, который перемещается в этом направлении.
Поиграйте с четким значением различных элементов в ваших документах, чтобы получить различные эффекты макета. Один из самых интересных всплывающих макетов — это серия изображений в правом или левом столбце рядом с абзацами текста. Даже если текст недостаточно длинный для прокрутки изображения, вы можете использовать очистку на всех изображениях, чтобы убедиться, что они появляются в столбце, а не рядом с предыдущим изображением.
HTML (повторите этот абзац):
Duis aute irure dolor sed do eiusmod tempor ведет к переизданию в завитке. Cupidatat не является независимым, ut labore et dolore magna aliqua.
CSS (для перемещения изображений влево):
img.float {float: left;
ясно: левый;
Маржа: 5px;
} И справа:
img.float {float: right;
ясно: право;
Маржа: 5px;
} Использование Floats для макета
Как только вы понимаете, как поплавок свойство работает, вы можете начать использовать его, чтобы выложить свои веб-страницы. Вот шаги, которые я предпринимаю для создания плавающей веб-страницы:
- Дизайн макета (на бумаге или в графическом инструменте или в моей голове).
- Определите, где будут разделяться страницы.
- Определите ширину различных контейнеров и элементов в них.
- Плавай все. Даже самый внешний элемент контейнера перемещается влево, так что я знаю, где он будет по отношению к окну просмотра браузера.
Если вы знаете ширину (проценты в порядке) разделов макета, вы можете использовать поплавок собственность, чтобы поместить их, где они принадлежат на странице. И хорошо, что вам не нужно беспокоиться о том, что блочная модель отличается для Internet Explorer или Firefox.
