Пример - пробуем переделать готовый шаблон сайта, и нам нужно изменить позиционирование некоего div. Попробовали задать position: relative - не сработало. Ага, значит нужно попробовать float: left. Лучше все же вникнуть в несколько основных особенностей этого свойства, и в дальнейшем применять его очень грамотно.
Задача: самые первые особенности работы с float: left (right)
Предлагаю сразу к делу - 7 основ работы с float:
1. Обтекаемость - свойство float выносит элемент из основного html-потока, заодно смещая его до максимально возможного значения влево или вправо. Остальное содержимое документа игнорирует элемент с примененным float.
2. Автоматически присваивается значение display: block - когда мы присвоили элементу float: right; (или left), то он получает все свойства Блока (уже можно не прописывать display:block;). Здесь нужно понимать также, что плавающий блок может быть только справа или слева (только два свойства по позиционированию float); нет значения, которое установило бы блок float по центру (вот радости то было бы, правда?).
3. Обязательно добавляйте width (задавайте ширину) для плавающих объектов - для корректного отображения плавающих элементов крайне важно задавать параметр ширины. Иначе вы можете получить что-то несуразное. Исключения - изображения. Для них ширина подразумевается "по умолчанию".
4. Вертикальные границы float'нутых блоков не объединяются с границами соседних блоков.
5. Линейность - при применении float и задавая для блока ширину, мы можем создавать "линии элементов", что активно используется при разработке Горизонтальных меню.
6. "Пока не найду места - не успокоюсь" - если плавающему блоку не будет хватать места в потоке, он будет перемещаться на 1 строку ниже, до тех пор, пока места не станет достаточно для его размещения.
float-left
7. Основная сложность - в том что разные браузеры используют различные технологии при отображении блоков со свойствами float. Это основное затруднение. Особенно если вы делаете сложную разметку сайта, где множество блоков, могут появится "перекосы" в различных браузерах.
Задача: самые первые особенности работы с float: left (right)
Предлагаю сразу к делу - 7 основ работы с float:
1. Обтекаемость - свойство float выносит элемент из основного html-потока, заодно смещая его до максимально возможного значения влево или вправо. Остальное содержимое документа игнорирует элемент с примененным float.
2. Автоматически присваивается значение display: block - когда мы присвоили элементу float: right; (или left), то он получает все свойства Блока (уже можно не прописывать display:block;). Здесь нужно понимать также, что плавающий блок может быть только справа или слева (только два свойства по позиционированию float); нет значения, которое установило бы блок float по центру (вот радости то было бы, правда?).
3. Обязательно добавляйте width (задавайте ширину) для плавающих объектов - для корректного отображения плавающих элементов крайне важно задавать параметр ширины. Иначе вы можете получить что-то несуразное. Исключения - изображения. Для них ширина подразумевается "по умолчанию".
4. Вертикальные границы float'нутых блоков не объединяются с границами соседних блоков.
5. Линейность - при применении float и задавая для блока ширину, мы можем создавать "линии элементов", что активно используется при разработке Горизонтальных меню.
6. "Пока не найду места - не успокоюсь" - если плавающему блоку не будет хватать места в потоке, он будет перемещаться на 1 строку ниже, до тех пор, пока места не станет достаточно для его размещения.
float-left
7. Основная сложность - в том что разные браузеры используют различные технологии при отображении блоков со свойствами float. Это основное затруднение. Особенно если вы делаете сложную разметку сайта, где множество блоков, могут появится "перекосы" в различных браузерах.
0 коммент.:
Отправить комментарий