Kombinace float a margin v CSS

Nyní je náš text přitlačen k obrázku z levé strany. Zkusme tento text trochu odsunout. K tomu nastavme našim odstavcům levý margin na 30px a nadřazenému divu - červený okraj.

Neočekávaně se doprava odsune pouze text, který přiléhá k nadřazenému divu, zatímco text přiléhající k obrázku se neodsune:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
}
img {
  float: left;
}

Результат:

Abychom pochopili, proč tomu tak je, přidejme odstavcům zelený okraj:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
}

Результат:

Jak vidíme, odstavce se ve skutečnosti odsouvají od levého okraje, ale ne od obrázku, nýbrž od nadřazeného divu. Podívejme se na to podrobněji, přidejme obrázku poloprůhlednost pomocí vlastnosti opacity:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

Nyní je již jasně vidět, že reakce na margin-left je, ale odstavce jsou ve skutečnosti umístěny pod obrázkem. Odeberme odsazení, ale ponechme obrázku poloprůhlednost:

html<div>
  <img src="img.png" alt="">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

Takhle ve skutečnosti naše odstavce vypadají - jejich text je odsunut obrázkem, ale fyzicky odstavce leží pod obrázkem, což je vidět na okraji, který začíná od levého okraje nadřazeného divu.

Vraťme margin a vložme obrázek do prvního odstavce:

html<div>
  <p>
    <img src="img.png" alt="">
    Lorem ipsum dolor sit amet, consectetur adipiscing elitorire.
  </p>
  <p>
    some long text
  </p>
</div>

cssdiv {
  width: 400px;
  border: 1px solid red;
  text-align: justify;
}
p {
  margin-left: 30px;
  border: 1px solid green;
}
img {
  float: left;
  opacity: 0.5;
}

Результат:

Nyní se obrázek pohybuje spolu s odstavci!