Ի՞նչ մեթոդներ եք գիտեք հոսքի արգելափակման (clearing) և ինչ իրավիճակներում են կիրառվում:
sobes.tech AI
Պատասխան AI-ից
overflow: hidden;կամoverflow: auto;: Կիրառվում էfloat-ով գտնվող տարր(եր)ի ծնողական տարրին: Ստեղծում է նոր ձևաչափի բլոկային կոնտեքստ (BFC), ինչը ստիպում է ծնողին ներառել շրջապատող տարրերը իր բարձրության մեջ:
Կարգավիճակ: Ամենահեշտ միջոցը, երբ անհրաժեշտ է թաքցնել տարրից դուրս եկող պարունակությունը կամ կիրառել սքրոլ, բայց այն նաև աշխատում է որպես մաքրման մեթոդ:
clear: both;: Կիրառվում է տարրին, որը չի պետք է շրջապատի նախորդfloat-ով տարրերը: Այս տարրը տեղադրվում է բոլոր շրջապատող տարրերի տակ:
Կարգավիճակ: Երբ անհրաժեշտ է ստեղծել նոր տող կամ բաժին այն տարրերից հետո, որոնք միմյանց շրջապատում են:
clearfixմեթոդը (::afterпсևդո-տարրեր): Ավելացնում է псևդո-տարր ծնողական կոնտեյներին որոշ հատկություններով, որոնք իմիտացիա ենclear: both;-ի, բայց առանց լրացուցիչ HTML տարրեր ավելացնելու:
.clearfix::after {
content: ""; /* Պարտադիր պարունակություն псևդո-տարրի համար */
display: table; /* Ստեղծում է նոր բլոկային կոնտեքստ, ինչպես `overflow: hidden;` */
clear: both; /* Կիրառում է մաքրման */
}
Կարգավիճակ: Ամենատարածված և խորհուրդ տրված մաքրման մեթոդը, որը մաքուր է և չի խանգարում markup-ի կառուցվածքին: Կիրառվում է ծնողական տարրին, որը պարունակում է շրջապատող տարրեր:
-
Օգտագործում
display: flexկամdisplay: grid: Ժամանակակից ձևավորող մեթոդներ, որոնք չեն պահանջում շրջապատում տարրեր տեղադրելու համար, այդպիսով վերացնելով մաքրման անհրաժեշտությունը: -
Ավելացնել լրացուցիչ տարր
clear: both;-ով (հին մեթոդ): Վերևից հետո ավելացնում է դատարկ HTML տարր և նրան է վերագրումclear: both;։
Կարգավիճակ: Հաշվվում է որպես հնացած և ցանկալի չհամարել, քանի որ ավելացնում է ավելորդ HTML։