Float ir margin derinys CSS

Dabar mūsų tekstas yra prigludęs prie paveikslėlio kairėje pusėje. Pabandykime šį tekstą šiek tiek atitolinti. Norėdami tai padaryti, nustatykime savo pastraipoms kairįjį margin 30px, o tėviniam div'ui - raudoną sienelę.

Netikėtai į dešinę atsitrauks tik tas tekstas, kuris prigludęs prie tėvinio div'o, o tekstas, prigludęs prie paveikslėlio - neatsitrauks:

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;
}

Результат:

Kad suprastume, kodėl taip yra, pridėkime pastraipoms žalią sienelę:

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;
}

Результат:

Kaip matome, iš tikrųjų pastraipos atsitraukia nuo kairiojo krašto, bet ne nuo paveikslėlio, o nuo tėvinio div'o. Kad išsamiau išnagrinėtume, pridėkime dar ir paveikslėlio pusiau skaidrumą per savybę 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;
}

Результат:

Dabar jau aiškiai matome, kad reakcija į margin-left yra, tik pastraipos iš tikrųjų yra išdėstytos po paveikslėliu. Pašalinkime atstumą, palikdami paveikslėlio pusiau skaidrumą:

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;
}

Результат:

Štai kaip iš tikrųjų atrodo mūsų pastraipos - jų tekstas yra atstumtas paveikslėlio, tačiau fiziškai pastraipos guli po paveikslėliu, tai matyti pagal sienelę, kuri prasideda nuo kairiojo tėvinio div'o krašto.

Grąžinkime margin ir įdėkime paveikslėlį į pirmąją pastraipą:

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;
}

Результат:

Dabar paveikslėlis juda kartu su pastraipomis!