Если свойство элемента с float установлено right или left:
Блоки с float по умолчанию не влияют на высоту родителя, то есть если у вас есть некоторый контейнер (display: block), а в нем находятся только плавающие блоки, то высота контейнера станет равна нулю (и блоки выпадут). Поэтому необходимо явно задавать высоту контейнера.
Или Решение #2. Добавить пустой блок с clear: both. Добавление подобного элемента отчищает «плавучесть» блоков и заставляет контейнер растягиваться на всю высоту. Семантически это не самое лучшее решение, так как вводит лишний элемент разметки.
Или Решение #3. Применить свойство overflow (свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров): auto (полосы прокрутки добавляются только при необходимости) или hidden (отображается только область внутри элемента, остальное будет скрыто) к контейнеру. Заставляет контейнер заново рассчитать высоту и изменить ее так, чтобы включать плавающие элементы, иначе ему бы пришлось добавить полосу прокрутки или скрыть их.
А вот внутристрочные боксы (display: inline-block) присутствие float-ов чувствуют. В отличие от блочных боксов, они никогда не пересекаются границами с float-ом. Они — тот самый контент, которому положено «обтекать float вдоль одной стороны».
- Элемент отображается как блочный, так словно ему установлено свойство display: block;
- Элемент по ширине сжимается до размеров содержимого, если для элемента явно не установлена ширина width;
- Элемент прилипает к левому (left) или правому краю (right);
- Все остальное содержимое страницы, идущее в HTML коде после элемента с float, обтекает его;
Блоки с float по умолчанию не влияют на высоту родителя, то есть если у вас есть некоторый контейнер (display: block), а в нем находятся только плавающие блоки, то высота контейнера станет равна нулю (и блоки выпадут). Поэтому необходимо явно задавать высоту контейнера.
Или Решение #2. Добавить пустой блок с clear: both. Добавление подобного элемента отчищает «плавучесть» блоков и заставляет контейнер растягиваться на всю высоту. Семантически это не самое лучшее решение, так как вводит лишний элемент разметки.
Или Решение #3. Применить свойство overflow (свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров): auto (полосы прокрутки добавляются только при необходимости) или hidden (отображается только область внутри элемента, остальное будет скрыто) к контейнеру. Заставляет контейнер заново рассчитать высоту и изменить ее так, чтобы включать плавающие элементы, иначе ему бы пришлось добавить полосу прокрутки или скрыть их.
Всё дело в так называемом «контексте» или «контексте форматирования»,
такие правила как display и overflow создают этот контекст, и согласно
правилам он (созданный контекст) не может пересекаться с флоатами. Что
вобщем и происходит. В результате блок занимает все доступное
пространство кроме флоата.
А вот внутристрочные боксы (display: inline-block) присутствие float-ов чувствуют. В отличие от блочных боксов, они никогда не пересекаются границами с float-ом. Они — тот самый контент, которому положено «обтекать float вдоль одной стороны».
Ширина строчных боксов, соседствующих с float-ом, зависит от ширины
float-а — а значит, используя float-ы разной ширины, можно сделать
границу текста ступенчатой и придать ей самый причудливый контур.
Свойство clear
Все значения [свойства clear], кроме 'none', потенциально вводят клиренс (clearance - просвет).
Клиренс препятствует схлопыванию margin-ов и действует как промежуток
над верхним margin-ом элемента. Он служит для «выталкивания» элемента по
вертикали ниже float-а.
Клиренс добавляет над блоком столько места, сколько нужно, чтобы блок оказался под самым высоким float-ом c соотв. стороны в текущем блочном контексте.
Источники: http://habrahabr.ru/post/136588/ и http://habrahabr.ru/post/136622/
Комментариев нет:
Отправить комментарий