Ово ће вам бити у реду ових дана (ИЕ 8 и новије):
.group:after ( content: ""; display: table; clear: both; )Примените га на било који надређени елемент у којем треба да обришете пловке. На пример:
Користили бисте ово уместо overflow: hidden;родитеља (не желите увек сакрити преливање ).
Сада мало историје!
Ово је била оригинална популарна верзија, дизајнирана да подржава прегледаче колико год је то било могуће:
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) .clearfix ( display: inline-block; ) /* start commented backslash hack \*/ * html .clearfix ( height: 1%; ) .clearfix ( display: block; ) /* close commented backslash hack */Тада је постојала мало чистија верзија коју је овде документовао Јефф Старр, на основу чињенице да нико не користи ИЕ за Мац, а то је и било управо хаковање обрнуте косе црте.
.clearfix:after ( visibility: hidden; display: block; font-size: 0; content: " "; clear: both; height: 0; ) * html .clearfix ( zoom: 1; ) /* IE6 */ *:first-child+html .clearfix ( zoom: 1; ) /* IE7 */Тада је постало популарно користити „група“ као назив класе, што је лепше и семантичније (преко Дана Цедерхолма). Такође, contentсвојству није потребан ни простор, може бити празан низ (преко Ницолас Галлагхер-а). Тада је без икаквог текста font-sizeнепотребан (Цхрис Цоииер).
.group:after ( visibility: hidden; display: block; content: ""; clear: both; height: 0; ) * html .group ( zoom: 1; ) /* IE6 */ *:first-child+html .group ( zoom: 1; ) /* IE7 */Ако одустанете од подршке за ИЕ 6 или 7, уклоните придружене линије.
Ажурирање 18. маја 2011: Ницолас Галлагхер поново са „микро“ јасним исправком. Погледајте и ове додатне ствари..group:before, .group:after ( content: ""; display: table; ) .group:after ( clear: both; ) .group ( zoom: 1; /* For IE 6/7 (trigger hasLayout) */ )Погледајте врх ове странице за најмодернију верзију цлеарфик-а.
У будућности ћемо можда моћи:
.group ( display: flow-root; )