Как избежать перекрытия bullet points картинкой в XHTML

Быстрый ответ

Маркеры элементов списка перекрывают плавающие элементы? Увеличьте padding-left для li или установите свойство list-style-position в состояние outside для ul. Это позволит отодвинуть маркеры от контента.

/* Все любят личное пространство */
li { padding-left: 20px; }

Или

/* Держим маркеры на виду, но вне строя */
ul { list-style-position: outside; }

Если проблема с перекрытием всё еще сохраняется, примените для ul свойство overflow со значением hidden. Этот подход, путем создания нового блочного форматирующего контекста, помогает избегать перекрытия списком плавающих элементов.

Причина проблемы (и способы её устранения)

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

Возможное решение проблемы — использование ul { overflow: hidden; }. Этот подход призывает всех элементов списка и их маркеров держаться подальше от плавающего элемента благодаря формированию нового блочного форматирующего контекста.

Установка свойства li { list-style-position: inside; } притягивает маркеры внутрь элементов списка, что предотвращает их перекрытие. Однако это может негативно повлиять на выравнивание текста, особенно при обводке текста вокруг маркера, так что тут следует быть аккуратнее.

Ещё одна альтернатива — использование display: table; для элементов списка. Это не скрывает элементы рядом с плавающими и не нарушает общую последовательность текста, в отличие от плавающих блоков.

Для старых версий Internet Explorer 6 примените ul { zoom: 1; } внутри условных комментариев. Этот метод помогает IE6 инициировать блочный форматирующий контекст, что обычно не происходит автоматически.

Инструментарий для решения распространенных проблем

Создание блочного форматирующего контекста

Для создания нового блочного форматирующего контекста установите ul { overflow: hidden; }. Этот подход лучше использовать, чем допускать изменение общего потока документа.

Подробнее об этом расскажет наш спикер на видео

Плавающие, но практичные

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

Класс "чистоты"

Если вы предпочитаете применять display: table; в определенных случаях, лучше применять это свойство к конкретным классам, чтобы избежать затрагивания других элементов ненужным display: table;.

Относительно этого

Избегайте ненужного распространения элементов li. Вместо этого используйте li { position: relative; } и немного сдвиньте их с помощью свойства left в сторону, чтобы избежать перекрытия с плавающими элементами.

Визуализация

Давайте рассмотрим примеры перекрытия и методы его устранения:

Пример перекрытия:
🚢⚓️🚢⚓️🚢⚓️

Если правильно управлять плавающими элементами и настроить отступы, получим:

Решение проблемы выглядит так:
🚢    ⚓️ 🚢    ⚓️ 🚢    ⚓️

Каждый объект занимает свою область пространства, исключая возможность столкновений!

Продвинутые решения для сложных перекрытий

Контролировать плавающие элементы

Не забудьте про свойство clear. Оно поможет вам управлять расположением элементов около плавающих блоков.

Размеры блока под контролем

Учтите свойство box-sizing: если его значение – border-box, то добавление внешних отступов не изменит размеры блока li.

Специфичность имеет значение

Увеличьте специфичность стилей, используя несколько классов или даже идентификаторы. Это поможет избежать неожиданных стилевых изменений в сложных списках.

Погружение в стандарты

Воспользуйтесь рекомендациями W3C о блочных форматирующих контекстах для надёжного решения проблемы. Правильные знания — ваш лучший инструмент!

Полезные материалы

1. Всё о свойстве float в CSS | CSS-Tricks – Обзор принципов работы с плавающими элементами.
2. float – CSS: Cascading Style Sheets | MDN – MDN представляет подробную информацию о свойстве float.
3. Какие методы 'clearfix' можно использовать? – Stack Overflow – Обсуждение разных методов очистки floating на Stack Overflow.
4. Свойство list-style в CSS – Руководство по настройке маркеров списков от W3Schools.
5. Понимание блочных форматирующих контекстов в CSS — SitePoint – Разбор решений для плавающих макетов на SitePoint.
6. Полное руководство по псевдоклассам и псевдоэлементам CSS — Smashing Magazine – Изучение псевдоклассов и псевдоэлементов в CSS с помощью Smashing Magazine.
7. Can I use... Таблицы поддержки для HTML5, CSS3 и прочего – Проверка совместимости браузеров для свойства CSS float на Can I use.