Отказ
Списки рядом с плавающими элементами вызывают проблемы. На мой взгляд, лучший способ предотвратить такие виды плавающих проблем - это избегать плавающих изображений, которые пересекаются с контентом. Это также поможет, когда вам нужно поддерживать адаптивный дизайн.
Простой дизайн, состоящий из центрированных изображений между абзацами, будет выглядеть очень привлекательно и его будет гораздо легче поддерживать, чем пытаться стать слишком причудливым. Это также один шаг от <figure>.
Но я действительно хочу плавающие изображения!
Хорошо, поэтому, если вы сумасшедший достаточно настойчив, чтобы продолжать идти по этому пути, есть пара методов, которые можно использовать.
Самое простое - заставить список использовать overflow: hidden или overflow: scroll, чтобы список был по существу сокращен, что возвращает отступ туда, где он полезен:
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
У этой техники есть несколько проблем. Если список становится длинным, он фактически не оборачивается вокруг изображения, что в значительной степени сводит на нет всю цель использования float на изображении.
img {
float: left;
}
.wrapping-list {
overflow: hidden;
padding-left: 40px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Но я действительно хочу упаковывать списки!
Хорошо, так что если вы даже сумасшедший более настойчивый и вы обязательно должны продолжать идти по этому пути, есть еще один метод, который можно использовать для переноса элементов списка и поддержания маркеров .
Вместо того, чтобы дополнять <ul> и пытаться заставить его вести себя хорошо с пулями (чего он никогда не хочет делать), уберите эти пули из <ul> и отдайте их <li> с. Пули опасны, и <ul> просто не отвечает за правильное обращение с ними.
img {
float: left;
}
.wrapping-list {
padding: 0;
list-style-position: inside;
}
.wrapping-list li {
overflow: hidden;
padding-left: 25px;
}
<img src="http://placehold.it/100x100"/>
<ul class="wrapping-list">
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
<li>lorem</li>
<li>ipsum</li>
<li>dolor</li>
<li>sit</li>
<li>amet</li>
</ul>
Такое поведение может вызывать странные вещи в сложном контенте, поэтому я не рекомендую добавлять его по умолчанию. Гораздо проще настроить его как нечто, на что можно переключиться, а не как то, что нужно переопределить.