clearfix հաք-ը

Տարօրինակ է, float-ներ օգտագործելիս կարող են տհաճ բաներ տեղի ունենալ։

img {
  float: right;
}

<div>

Այ քե՜զ բաաան ․․․ այս պատկերը ավելի մեծ է քան իրեն պարունակող էլեմենտը և այն լողուն է։ Այն դուրս է եկել արտաքին կոնտեյների սահմաններից։

Սա ուղղելու մի միջոց կա, սակայն այն տգեղ է։ Այն կոչվում է clearfix հաք։

Արի ավելացնենք նոր CSS

.clearfix {
  overflow: auto;
}

Տեսնենք ինչ ստացվեց։

<div class="clearfix">

Այսպես ավելի լավ է։

Սա աշխատում է ժամանակակից դիտարկիչներում Եթե ցանկանում ես որ այս հաքը աշխատի նաև IE6-ում՝ ավելացրու հետևյալը։

.clearfix {
  overflow: auto;
  zoom: 1;
}

Էկզոտիկ դիտարկիչները կպահանջեն հատուկ մոտեցում։ clearfixing-ի աշխարհը բավականին սարսափելի է, սակայն այս պարզ լուծումը կաշխատի ներկայիս բոլոր գլխավոր դիտարկիչներում։