Коришћење Цлеарфик својства може аутоматски прилагодити родитељски елемент према елементу подређеном и решити проблеме у ХТМЛ коду помоћу неких атрибута попут „ преливати ” који контролише димензије надређених и подређених елемената без потребе за додатним ознакама.
Коришћење Цлеарфик својства
Хајде да разумемо употребу својства цлеарфик да бисмо знали шта оно ради са излазом додавањем својства ЦСС цлеарфик у фрагмент ХТМЛ кода:
Без својства Цлеарфик-а
Хајде да покренемо исечак кода без извршавања својства цлеарфик да бисмо разумели врсту проблема које цлеарфик може да реши:
Направите класу у ХТМЛ-у која умеће слику у див контејнер:
< див класа = 'јасна поправка' >
< бр >< имг класа = 'имг' срц = 'имаге.пнг' све = 'слика' ширина = '250' висина = '180' >
Текст...
< / див >
Следи ЦСС код за горњи ХТМЛ:
<стиле >
.цлеарфик {
граница : 3пк чврст #2баа12 ;
паддинг : 5пк ;
}
.имг {
пловак : лево ;
}
>
Ово ће генерисати излаз на такав начин да ће се подређена класа која садржи слику прелити изван контејнера. У оваквим ситуацијама, својство цлеар фик се може користити за лако брисање или решавање овог проблема:
Са Цлеарфик својством
Да бисмо решили проблем, можемо једноставно додати преливати атрибут са вредношћу једнаком ауто који ће прилагодити родитељски контејнер према величини подређеног елемента:
<стиле >.цлеарфик {
граница : 3пк чврст #2баа12 ;
паддинг : 5пк ;
}
.цлеарфик {
преливати : ауто ;
}
.имг {
пловак : лево ;
}
>
Овде у овом исечку кода, родитељска класа је контејнер и слика је уметнута у њену подређену класу:
< див класа = 'јасна поправка' >< бр >< имг класа = 'имг' срц = 'имаге.пнг' све = 'слика' ширина = '250' висина = '180' >
Текст...
< / див >
Додавање својства цлеарфик аутоматски ће проширити родитељски елемент (контејнер) у складу са величином подређеног елемента који представља уметнуту слику:
Овако функционише Цлеарфик својство у ХТМЛ-у.
Закључак
Својство цлеарфик се користи за прилагођавање подређених елемената у ХТМЛ-у према надређеним елементима са једноставним својством цлеарфик без потребе за додатним ознакама. Коришћење ЦСС Цлеарфик-а повећава или смањује димензије надређених елемената да би их прилагодио према димензијама подређених елемената.