Bergantung pada desain yang diproduksi, masing-masing solusi CSS clearfix di bawah ini memiliki manfaatnya sendiri.
Clearfix memang memiliki aplikasi yang bermanfaat tetapi juga telah digunakan sebagai peretasan. Sebelum Anda menggunakan perbaikan yang jelas mungkin solusi css modern ini dapat bermanfaat:
Solusi Clearfix Modern
Wadah dengan overflow: auto;
Cara paling sederhana untuk menghapus elemen melayang adalah menggunakan gaya overflow: autopada elemen yang mengandung. Solusi ini berfungsi di setiap browser modern.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
Satu kelemahan, menggunakan kombinasi margin dan bantalan tertentu pada elemen eksternal dapat menyebabkan bilah gulir muncul tetapi ini dapat diselesaikan dengan menempatkan margin dan bantalan pada elemen induk yang mengandung lainnya.
Menggunakan 'overflow: hidden' juga merupakan solusi perbaikan yang jelas, tetapi tidak akan memiliki scrollbar, namun menggunakan hidden akan memotong konten yang diposisikan di luar elemen yang mengandung.
Catatan: Elemen apung adalah imgtag dalam contoh ini, tetapi bisa berupa elemen html apa pun.
Clearfix Reloaded
Thierry Koblentz di CSSMojo menulis: Clearfix terbaru dimuat ulang . Dia mencatat bahwa dengan menjatuhkan dukungan untuk oldIE, solusinya dapat disederhanakan menjadi satu pernyataan css. Selain itu, menggunakan display: block(bukan display: table) memungkinkan margin untuk runtuh dengan benar ketika elemen dengan clearfix bersaudara.
.container::after {
content: "";
display: block;
clear: both;
}
Ini adalah versi clearfix paling modern.
⋮
⋮
Solusi Clearfix Lama
Solusi di bawah ini tidak diperlukan untuk peramban modern, tetapi mungkin bermanfaat untuk menargetkan peramban lama.
Perhatikan bahwa solusi ini bergantung pada bug browser dan karenanya hanya boleh digunakan jika tidak ada solusi di atas yang berfungsi untuk Anda.
Mereka terdaftar kira-kira dalam urutan kronologis.
"Beat That ClearFix", sebuah perbaikan yang jelas untuk browser modern
Thierry Koblentz dari CSS Mojo telah menunjukkan bahwa ketika menargetkan browser modern, kita sekarang dapat menghapus zoomdan ::beforeproperti / nilai dan hanya menggunakan:
.container::after {
content: "";
display: table;
clear: both;
}
Solusi ini tidak mendukung untuk IE 6/7 ... sengaja!
Thierry juga menawarkan: " Sebuah peringatan : jika Anda memulai proyek baru dari awal, lakukan saja, tetapi jangan menukar teknik ini dengan yang Anda miliki sekarang, karena meskipun Anda tidak mendukung oldIE, aturan Anda yang ada mencegah margin yang runtuh. "
Micro Clearfix
Solusi clearfix terbaru dan diadopsi secara global, the Micro Clearfix oleh Nicolas Gallagher .
Dukungan yang dikenal: Firefox 3.5+, Safari 4+, Chrome, Opera 9+, IE 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
Properti Melimpah
Metode dasar ini lebih disukai untuk kasus biasa, ketika konten yang diposisikan tidak akan ditampilkan di luar batas wadah.
http://www.quirksmode.org/css/clearing.html
- menjelaskan cara mengatasi masalah umum yang terkait dengan teknik ini, yaitu pengaturan width: 100%pada wadah.
.container {
overflow: hidden;
display: inline-block;
display: block;
}
Daripada menggunakan displayproperti untuk menetapkan "hasLayout" untuk IE, properti lain dapat digunakan untuk memicu "hasLayout" untuk suatu elemen .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
Cara lain untuk menghapus float menggunakan overflowproperti adalah dengan menggunakan underscore hack . IE akan menerapkan nilai yang diawali dengan garis bawah, browser lain tidak. The zoomproperti memicu hasLayout di IE:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
Meskipun ini berfungsi ... tidak ideal untuk menggunakan peretasan.
PIE: Metode Kliring Mudah
Metode "Kliring Mudah" yang lebih tua ini memiliki keuntungan memungkinkan elemen yang diposisikan untuk menggantung di luar batas wadah, dengan mengorbankan CSS yang lebih rumit.
Solusi ini cukup lama, tetapi Anda dapat mempelajari semua tentang Kliring Mudah pada Posisi Is Everything: http://www.positioniseverything.net/easyclearing.html
Elemen menggunakan properti "jelas"
Solusi cepat dan kotor (dengan beberapa kekurangan) ketika Anda dengan cepat menampar sesuatu bersama:
<br style="clear: both" /> <!-- So dirty! -->
Kekurangannya
- Ini tidak responsif dan karenanya mungkin tidak memberikan efek yang diinginkan jika gaya tata letak berubah berdasarkan permintaan media. Solusi dalam CSS murni lebih ideal.
- Itu menambahkan markup html tanpa harus menambahkan nilai semantik.
- Itu membutuhkan definisi inline dan solusi untuk setiap instance daripada referensi kelas untuk solusi tunggal dari "clearfix" di css dan referensi kelas untuk itu di html.
- Itu membuat kode sulit untuk bekerja dengan orang lain karena mereka mungkin harus menulis lebih banyak peretasan untuk mengatasinya.
- Di masa mendatang ketika Anda perlu / ingin menggunakan solusi clearfix lain, Anda tidak perlu kembali dan menghapus setiap
<br style="clear: both" />tag yang berserakan di sekitar markup.
