наверх






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

float


Обтекание элементов может происходить с двух сторон: с левой или с правой.

left - элемент прижимается к левому краю, а другие элементы обтекают его с правой стороны.
right - элемент прижимается к правому краю, а другие элементы обтекают его с левой стороны.

.item {
  float: left;
}


Мы задали значение left, а это значит, что все элементы будут обтекать элемент с правой стороны. Но, если все оставить как есть, то обтекание будет и снизу. Например если будет слишком много текста, который обтекает изображение, то он обтечет его справа и спуститься вниз, под изображение.
Кому то этот вариант покажется нормальным, но ведь можно такой эффект и убрать при помощи свойства clear.

clear


Данное свойство убирает обтекание с определенной стороны или со всех сторон:

both - отменяет обтекание со всех сторон.
left - отменяет обтекание с левого края.
right - отменяет обтекание с правого края.

#clear {
  clear: both;
}






Поделиться
Text-shadow генератор
Занимаетесь веб-разработкой? Полноценный кроссбраузерный text-shadow генератор с поддержкой нескольких теней.


Комментарии — 0


У вас нет прав для добавления комментария. Зарегистрируйтесь или авторизуйтесь.