Penetrazione degli elementi fluttuanti attraverso i tag in CSS
Supponiamo ora che il testo sia posizionato in paragrafi,
e l'immagine, a cui è stata assegnata la proprietà float
si trovi sopra questi paragrafi. In questo caso
tutto funzionerà come prima - la presenza
di altri tag non interferisce con il flusso:
<div>
<img src="img.png" alt="">
<p>
some long text
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
img {
float: left;
}
:
Supponiamo ora che il primo paragrafo abbia poco testo - in questo caso l'immagine si sovrapporrà anche al secondo paragrafo:
<div>
<img src="img.png" alt="">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
</p>
<p>
some long text
</p>
</div>
div {
width: 400px;
border: 1px solid red;
text-align: justify;
}
img {
float: left;
}
: