aviso Legal
As listas ao lado dos elementos flutuantes causam problemas. Na minha opinião, a melhor maneira de evitar esses tipos de problemas flutuantes é evitar imagens flutuantes que se cruzam com o conteúdo. Também ajudará quando você precisar oferecer suporte ao design responsivo.
Um design simples de ter imagens centralizadas entre parágrafos parecerá muito atraente e será muito mais fácil de suportar do que tentar ficar extravagante. Também está a um passo de a <figure>.
Mas eu realmente quero imagens flutuadas!
Ok, se você é louco por persistência o suficiente para continuar nesse caminho, há algumas técnicas que podem ser usadas.
O mais simples é fazer com que a lista use overflow: hiddenou overflow: scrollpara que a lista seja essencialmente encolhida, o que puxa o preenchimento de volta para onde é útil:
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>
Esta técnica tem alguns problemas, no entanto. Se a lista for longa, na verdade ela não contorna a imagem, o que praticamente derrota todo o propósito de usá float-la.
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>
Mas eu realmente quero listas de quebra-cabeças!
Ok, se você é ainda mais louco e persistente e precisa continuar por esse caminho, existe outra técnica que pode ser usada para agrupar os itens da lista e manter marcadores.
Em vez de preencher <ul>e tentar fazer com que ele se comporte bem com marcadores (o que nunca parece querer fazer), retire-os <ul>e dê-os ao <li>s. As balas são perigosas e os <ul>justos não são responsáveis o suficiente para lidar com elas adequadamente.
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>
Esse comportamento de agrupamento pode fazer coisas estranhas ao conteúdo complexo, por isso não recomendo adicioná-lo por padrão. É muito mais fácil configurá-lo como algo que pode ser incluído, em vez de algo que deve ser substituído.
