Свободное размещение и позицирование в CSS.

Как уже не раз говорили, что свойство float работает не только с изображением, но и с любым элементом (абзац, список, элемент div и т.д.).

Oсновные аспекты свободного размещения элементов в CSS:

• Любые свободно размещенные элементы близки по поведению к блокам. Такого эффекта можно добиться, указав display: block.

• При размещении незамещаемых ( текстовых) элементов нужно задавать ширину ( width). Без этого прямоугольник вывода содержимого может сжаться до минимально возможного. Это, пожалуйста, запомните.

• Свободно размещаемый элемент располагается внутри зоны вывода содержимого охватывающего блока ( ближайшего к элементу блочного элемента родителя) и никогда не выходит в зону, отведенную заполнению.

• Вдоль каждой стороны элемента сохраняются необходимые отступы. Иными словами, элемент свободно размещается целиком (от одного внешнего края и до другого), а соседнее содержимое «обтекает» его.

• В отличие от обычных отступы вокруг свободно размещаемых элементов никогда не сжимаются (даже по вертикальной оси). Своеобразное поведение демонстрируют и элементы, следующие за теми, которые свободно размещены.

Cвойство float элемента img фактически подменяет признанный устаревшим align. Атрибут margin в этом примере играет роль также устаревших hspace и vspace. Преимуществом поля margin является возможность задавать разные отступы вдоль каждой стороны иллюстрации (отступ, определявшийся hspace слева, был равен отступу справа, а отступ, заданный vspace сверху, был равен отступу снизу). Для расширения пространства вокруг свободно размещенного элемента дополнительно можно использовать заполнение. Свободно размещенные элементы не входят в поток нормального расположения документа, однако они влияют на прочие элементы.

Спецификация каскадных таблиц стилей CSS содержится восемь конкретных правил позиционирования свободно размещенных объектов. Помимо требования о том, чтобы свободно размещенные элементы не выходили за внутренние границы (или за зону вывода содержимого) охватывающих блоков; есть требования, чтобы предотвратить наложение объектов одного на другой. Ввиду определенной доли свободы в спецификации, а также в силу традиций и сложившейся практики даже самые современные и отвечающие стандартам рекомендации браузеры при выводе свободно размещенных объектов могут действовать нелогично. Не забывайте страницы Вашего сайта протестировать в разных браузерах!

Свободно размещенные элементы, находящиеся поблизости в документе-источнике, не могут друг друга перекрывать.Вот, просмотрите пункты правил:

• Если элементы располагаются одинаково, то каждый следующий объект должен отодвигаться в направлении размещения, пока он не достигнет внутреннего края охватывающего блока или вплотную не подойдет к другому элементу. В итоге с одного края может скопиться несколько свободно размещаемых элементов.

• Если для размещения элементов бок о бок недостаточно места, второй из элементов отодвигается вниз, пока освободившегося пространства не хватит для его вывода без перекрытия первого; объекты с шириной больше ширины блока располагаются по разным его краям.

• Свободно размещаемые объекты собираются или ставятся вплотную без перекрытия.

• Верх элемента должен оставаться в пределах внутреннего верхнего края элемента-родителя.

• Верх элемента, не входящего в блок, не может располагаться выше предыдущего элемента уровня блока. Элементу не разрешается «всплывать» выше данной отметки.

• Верх элемента не может начинаться выше другого такого элемента, который в исходном тексте следует перед ним.

• Если свободно размещаемый элемент начинается в середине потока текста другого элемента разметки, он не должен «всплывать» до его верха, а начинается у верхней границы прямоугольника с окружающим данный элемент текстом.

• Свободно размещенные элементы не поднимаются выше верха своих родителей и выше предыдущего блока, свободно размещенные элементы не поднимаются выше прямоугольника, в котором они описаны

Свободное размещение и позицирование в CSS.

(продолжение)

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ:

Свободное размещение и позицирование в CSS.

(продолжение)

ПОНРАВИЛОСЬ?ПОДЕЛИСЬ с ДРУЗЬЯМИ:

ПОНРАВИЛОСЬ?
ПОДЕЛИСЬ с ДРУЗЬЯМИ: