Makabila ya CSS - Hifadhi na Clearfix

Thamani ya clear

clear Thamani inaeleza wapi yuko inayofikia kwenye yukiwa kusafishwa na wapi yuko inayofikia kwenye yuko iliyosafishwa.

clear Thamani za ujaribio zingewezekana kuwa:

  • none - inafikia kwa kushoto na kulia. Thamani ya kuzingatia
  • left - kulia hakuna yuko inayofikia
  • right - kushoto hakuna yuko inayofikia
  • both - kulia au kushoto hakuna yuko inayofikia
  • inherit - yuko inaonekana kwa thamani ya clear ya kina chake

Inatumiwa: clear Kina kama kawaida inatumiwa kwenye yuko: float Baada ya ujaribio.

Kwenye kusafisha uharibifu, lazima kufikirika kwamba kufikirika: kama yuko inayofikia kulia, kunaonesha kwamba kusafisha kulia. Ukifikia kwa uharibifu wa kwanza itakaa kushirikiana, lakini yukiwa kusafishwa itakaa kwenye chini yake.

Mifano hii itakupima uharibifu wa kulia. Inaeleza kwamba kwenye (div) kulia hakuna yuko inayofikia:

Mfano

div {
  clear: left;
}

Mfano wa Kupiga Kikao

clearfix Hack

Iki yuko inayotoka na yuko yake inayotoka, na inayofikia kwa uharibifu, itakuwa na uharibifu kwenye kina chake:

Kisha tunaweza kuongeza overflow: auto; kwa elementi ya kubuni, ili kusaidia kusolwa hatua hii:

Mfano

.clearfix {
  overflow: auto;
}

Mfano wa Kupiga Kikao

Hata wakati unaweza kusaidia mabadiliko ya margini na paddingi (inakubaliana na kuona scrollbar), overflow: auto clearfix itakuwa kutosha. Lakini, teknolojia ya clearfix ya hivi karibuni inapakia kwa usalama zaidi, programu hii inatumiwa kwenye kati ya website zingine:

Mfano

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

Mfano wa Kupiga Kikao

Wewe utakupata Mafunzo ya Kipya Kufuatia Kitabu hiki ::after Elementi ya Kifupi.