A float törlése a CSS clear tulajdonságával

A probléma megoldására létezik egy speciális clear tulajdonság, amely törli a float-ot. A left érték bal oldali float-ot töröl, a right érték - jobb oldalit, az both érték pedig - mindkét oldalit. Ezt az értéket használják a leggyakrabban.

Tehát a clear tulajdonság törli a float-ot. Esetünkben ez lehetővé teszi számunkra, hogy az első div-ből származó lebegő kép ne nyúljon a második div-ra.

Ebben az esetben a clear tulajdonságot annak az elemnek kell adni, amelyre a lebegő elemek nem nyúlhatnak, azaz esetünkben ezt a második div-nek kell adni.

Tegyük ezt - adjunk a második div-nek a parent osztályon kívül a clearfix osztályt is és ennek az új osztálynak állítsuk be a clear tulajdonságot both értékre - a kép rányúlása eltűnik:

html<div class="parent">
  <img src="img.png" alt="">
  text
</div>
<div class="parent clearfix">
  text
</div>

css.parent {
  border: 1px solid red;
}
.parent img {
  float: left;
}

.clearfix {
  clear: both;
}

Результат:

A clearfix név általánosan elfogadott, ezért a továbbiakban is ezt használd.