Свойство CSS является очень важным свойством для макета. Это позволяет вам позиционировать дизайн ваших веб-страниц именно так, как вы хотите, чтобы они отображались, но чтобы использовать его, вы должны понимать, как он работает.
В таблице стилей CSS свойство float выглядит так:
.right {float: right; }
Это говорит браузеру, что все с классом «право» должно быть смещено вправо.
Вы бы назначили это так:
class = "right" />
Что можно плавать с помощью свойства CSS Float?
Вы не можете плавать каждый элемент на веб-странице. Вы можете перемещать только элементы уровня блока . Это элементы, занимающие место на странице, например изображения, абзацы, разделы и списки.
Другие элементы, которые влияют на текст, но не создают блока на странице, называются встроенными элементами и не могут быть перемещены. Это такие элементы, как span, разрывы строк, сильный акцент или курсив.
Где они плавают?
Вы можете перемещать элементы вправо или влево. Любой элемент, который следует за плавающим элементом, будет обтекать плавающий элемент на другой стороне.
Например, если вы перемещаете изображение влево , любой текст или другие элементы, следующие за ним, будут обтекать его вправо. И если вы перемещаете изображение вправо , любой текст или другие последующие элементы будут обтекать его слева. Изображение, помещенное в блок текста без примененного к нему стиля с плавающей точкой, будет отображаться, однако браузер настроен на отображение изображений. Обычно это так, что первая строка следующего текста отображается внизу изображения.
Как далеко они будут плавать?
Элемент, который был перемещен, будет перемещаться как можно дальше влево или вправо от элемента контейнера. Это приводит к нескольким различным ситуациям в зависимости от того, как написан ваш код. В этих примерах вы поместите небольшой элемент DIV слева:
- Если плавающий элемент не имеет предопределенной ширины, он займет столько горизонтального пространства, сколько требуется и доступно, независимо от плавающего элемента.
Запись
Некоторые браузеры пытаются размещать элементы рядом с плавающими элементами, когда ширина не определена, обычно оставляя неплавающий элемент лишь небольшим пространством. Поэтому вы всегда должны определять ширину плавающих элементов.
- Если контейнерный элемент является HTML-элементом, плавающий DIV будет находиться на левом поле страницы.
- Если элемент контейнера сам содержит что-то еще, плавающий DIV будет располагаться на левом поле контейнера.
- Вы можете вкладывать плавающие элементы, и это может привести к тому, что поплавок окажется в удивительном месте. Например, этот float является левосторонним DIV внутри правостороннего DIV .
- Плавающие элементы будут сидеть рядом друг с другом, если в контейнере есть место. Например, этот контейнер имеет три элемента DIV шириной 100px, плавающие в контейнере шириной 400px.
Вы даже можете использовать поплавки для создания макета фотогалереи. Вы помещаете каждую миниатюру (она работает лучше всего, когда все они одного размера) в DIV с заголовком и плавающими элементами DIV в контейнере. Независимо от того, насколько широк окно браузера, миниатюры будут выстраиваться равномерно.
Выключение поплавка
Когда вы знаете, как заставить элемент плавать, важно знать, как отключить его. Вы выключаете поплавок с помощью свойства 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 для макета
Как только вы поймете, как работает свойство float , вы можете начать использовать его для размещения своих веб-страниц. Вот шаги, которые я предпринимаю для создания плавающей веб-страницы:
- Дизайн макета (на бумаге или в графическом инструменте или в моей голове).
- Определите, где будут разделяться страницы.
- Определите ширину различных контейнеров и элементов в них.
- Плавай все. Даже самый внешний элемент контейнера перемещается влево, так что я знаю, где он будет по отношению к окну просмотра браузера.
Если вы знаете ширину (в процентах), разделов макета, вы можете использовать свойство float, чтобы разместить их там, где они принадлежат странице. И хорошо, что вам не нужно сильно беспокоиться о том, что блочная модель отличается для Internet Explorer или Firefox.