Sobes.tech
Middle

Ի՞նչ մեթոդներ եք գիտեք հոսքի արգելափակման (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։