CSS-ում float-ի և margin-ի համադրություն

Այժմ մեր տեքստը ձախ կողմից սեղմված է նկարին: Փորձենք մի փոքր հեռացնել այս տեքստը: Դրա համար մեր պարբերություններին տանք ձախ margin 30px, իսկ ծնող div-ին՝ կարմիր սահման:

Անսպասելիորեն աջ կտեղափոխվի միայն այն տեքստը, որը հարում է ծնող div-ին, իսկ նկարին հարող տեքստը չի հեռանա:

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

Результат:

Հասկանալու համար, թե ինչու է այդպես, ավելացնենք պարբերություններին կանաչ սահման:

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

Результат:

Ինչպես տեսնում ենք, իրականում պարբերությունները հեռանում են ձախ եզրից, բայց ոչ թե նկարից, այլ ծնող div-ից: Մանրամասն դիտարկելու համար եկեք ավելացնենք նկարի կիսաթափանցիկություն 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;
}

Результат:

Ահա հիմա հստակ երևում է, որ margin-left-ի հետևանք կա, միայն թե պարբերությունները իրականում գտնվում են նկարի տակ: Եկեք հանենք բացատը, թողնելով նկարի կիսաթափանցիկությունը:

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

Результат:

Ահա այսպես են իրականում նկատվում մեր պարբերությունները - նրանց տեքստը հեռացված է նկարով, բայց ֆիզիկապես պարբերությունները գտնվում են նկարի տակ, դա երևում է սահմանից, որն սկսվում է ծնող div-ի ձախ եզրից:

Եկեք վերադարձնենք margin-ը և նկարը տեղադրենք առաջին պարբերության մեջ:

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

Результат:

Այժմ նկարը շարժվում է պարբերությունների հետ միասին: