A clear tulajdonság

A clear tulajdonság megszünteti egy elem más elemek általi körbefolyását, amelyet a float tulajdonság határoz meg. A következő értékeket veheti fel: none (megszünteti a saját hatását), both (egyszerre megszünteti a float hatását jobbról és balról), left (megszünteti a float hatását balról), right (megszünteti a float hatását jobbról).

Szintaxis

cssszelektor {
  clear: none vagy left vagy right vagy both
}

Példa

Szüntessük meg a kép szöveggel való körbefolyását balról:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    szöveg szöveg szöveg szöveg szöveg szöveg
    szöveg szöveg szöveg szöveg szöveg szöveg
    szöveg szöveg szöveg szöveg szöveg szöveg
    szöveg szöveg szöveg szöveg szöveg szöveg
  </p>
</div>

css.image {
  float: left;
  padding-right: 10px;
}
.txt {
  clear: left;
}

Результат:

Példa

Most pedig szüntessük meg a kép szöveggel való körbefolyását jobbról:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    szöveg szöveg szöveg szöveg szöveg szöveg
    szöveg szöveg szöveg szöveg szöveg szöveg
    szöveg szöveg szöveg szöveg szöveg szöveg
    szöveg szöveg szöveg szöveg szöveg szöveg
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: right;
}

Результат:

Példa

Szüntessük meg magának a clear tulajdonságnak a hatását:

html<img class="image" src="bg.png" alt="">
<div class="txt">
  <p>
    szöveg szöveg szöveg szöveg szöveg szöveg
    szöveg szöveg szöveg szöveg szöveg szöveg
    szöveg szöveg szöveg szöveg szöveg szöveg
    szöveg szöveg szöveg szöveg szöveg szöveg
  </p>
</div>

css.image {
  float: right;
  padding-right: 10px;
}
.txt {
  clear: none;
}

Результат:

Lásd még