Keuntungan menggunakan display: inline-block vs float: left di CSS

Biasanya, ketika kami ingin memiliki beberapa DIVsbaris, kami akan menggunakan float: left, tetapi sekarang saya menemukan trikdisplay:inline-block

Contoh tautan di sini . Menurut saya itu display:inline-blockadalah cara yang lebih baik untuk align DIVsberturut-turut, tetapi apakah ada kekurangannya? Mengapa pendekatan ini kurang populer daripada floattriknya?

Dalam 3 kata: inline-blocklebih baik.

Blok Sebaris

Satu-satunya kelemahan dari display: inline-blockpendekatan ini adalah bahwa di IE7 dan di bawahnya sebuah elemen hanya dapat ditampilkan inline-blockjika sudah inlinesecara default. Artinya, alih-alih menggunakan <div>elemen, Anda harus menggunakan <span>elemen. Ini sama sekali bukan kelemahan besar karena secara semantik a <div>adalah untuk membagi halaman sedangkan a <span>hanya untuk menutupi rentang halaman, jadi tidak ada perbedaan semantik yang besar. Manfaat besar dari display:inline-blockadalah bahwa ketika pengembang lain mempertahankan kode Anda di kemudian hari, jauh lebih jelas apa yang display:inline-blockdan text-align:right sedang coba dicapai daripada pernyataan float:leftatau float:right. Manfaat favorit saya dari inline-blockpendekatan ini adalah mudah digunakan vertical-align: middle, line-heightdantext-align: centeruntuk memusatkan elemen dengan sempurna, dengan cara yang intuitif. Saya menemukan posting blog yang bagus tentang cara menerapkan blok-sebaris lintas-browser, di blog Mozilla . Berikut kompatibilitas browsernya .

Mengapung

Alasan penggunaan floatmetode ini tidak cocok untuk tata letak halaman Anda adalah karena floatproperti CSS pada awalnya dimaksudkan hanya untuk memiliki teks yang membungkus gambar (gaya majalah) dan, menurut desain, tidak paling cocok untuk tujuan tata letak halaman umum. Saat mengubah elemen mengambang nanti, terkadang Anda akan mengalami masalah pemosisian karena tidak ada di aliran halaman . Kerugian lainnya adalah umumnya memerlukan perbaikan yang jelas jika tidak maka dapat merusak aspek halaman. Clearfix memerlukan penambahan elemen setelah elemen yang diapungkan untuk menghentikan induknya agar tidak runtuh di sekitarnya yang melintasi garis semantik antara memisahkan gaya dari konten dan dengan demikian merupakan anti-pola dalam pengembangan web .

Masalah ruang putih apa pun yang disebutkan dalam tautan di atas dapat dengan mudah diperbaiki dengan white-spaceproperti CSS.

Edit:

SitePoint adalah sumber yang sangat kredibel untuk saran desain web dan mereka tampaknya memiliki pendapat yang sama dengan saya:

Jika Anda baru mengenal tata letak CSS, Anda akan dimaafkan jika berpikir bahwa menggunakan pelampung CSS dengan cara yang imajinatif adalah puncak keterampilan. Jika Anda telah mengonsumsi tutorial tata letak CSS sebanyak yang Anda bisa temukan, Anda mungkin mengira bahwa menguasai float adalah ritus peralihan. Anda akan terpesona oleh kecerdikan, kagum dengan kerumitannya, dan Anda akan mendapatkan rasa pencapaian saat Anda akhirnya memahami cara kerja pelampung.

Jangan tertipu. Anda sedang dicuci otak.

http://www.sitepoint.com/give-floats-the-flick-in-css-layouts/

Pembaruan 2015 - Flexbox adalah alternatif yang baik untuk peramban modern :

.container {
  display: flex; /* or inline-flex */
}

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

Info lebih lanjut

Pembaruan 21 Desember 2016

Bootstrap 4 menghapus dukungan untuk IE9, dan dengan demikian menghilangkan float dari baris dan menjadi Flexbox penuh.

Tarik permintaan # 21389

Meskipun saya setuju bahwa secara umum inline-blocklebih baik, ada satu hal tambahan yang perlu dipertimbangkan jika Anda menggunakan lebar persentase untuk membuat kisi responsif (atau jika Anda ingin lebar piksel sempurna):

Jika Anda menggunakan inline-blockuntuk kisi yang total lebarnya 100% atau mendekati 100%, Anda perlu memastikan markup HTML Anda tidak berisi spasi kosong di antara kolom .

Dengan float, ini bukan sesuatu yang perlu Anda khawatirkan - kolom mengambang di atas spasi atau konten lain di antara kolom. Jawaban pertanyaan ini memiliki beberapa tip bagus tentang cara menghapus spasi HTML tanpa membuat kode Anda jelek .

Jika karena alasan apa pun Anda tidak dapat mengontrol markup HTML (mis. CMS yang dibatasi), Anda dapat mencoba trik yang dijelaskan di sini, atau Anda mungkin perlu berkompromi dan menggunakan float sebagai ganti blok-sebaris. Ada juga trik CSS jelek yang seharusnya hanya digunakan dalam keadaan ekstrim, seperti font-size:0;pada penampung kolom kemudian menerapkan kembali ukuran font dalam setiap kolom .

Sebagai contoh:

• Berikut adalah kisi 3 kolom dengan lebar 33,3%float: left . Ini "hanya berfungsi" (tetapi untuk pembungkusnya perlu dibersihkan).
• Berikut grid yang sama persis, denganinline-block . Spasi putih antar blok menciptakan ruang dengan lebar tetap yang mendorong lebar total melebihi 100%, merusak tata letak dan menyebabkan kolom terakhir turun ke bawah baris.
• Berikut adalah kisi yang sama, dengan inline-blockdan tanpa spasi di antara kolom di HTML . Ini "berfungsi" lagi - tetapi HTML lebih jelek dan CMS Anda mungkin memaksakan semacam prettification atau indentasi ke output HTML-nya sehingga hal ini sulit dicapai dalam kenyataan.

Jika Anda ingin menyelaraskan divdengan piksel yang akurat, maka gunakan float. inline-blocktampaknya selalu mengharuskan Anda untuk memangkas beberapa piksel (setidaknya di IE)

Anda dapat menemukan jawabannya secara mendalam di sini .

Namun secara umum dengan floatAnda perlu menyadari dan menjaga elemen sekitarnya dan inline-blockcara sederhana untuk elemen garis.

Terima kasih

Ada satu karakteristik tentang blok-sebaris yang mungkin tidak lurus ke depan. Artinya, nilai default untuk perataan vertikal di CSS adalah baseline. Ini dapat menyebabkan beberapa perilaku penyelarasan yang tidak terduga. Lihat artikel ini.

http://www.brunildo.org/test/inline-block.html

Sebaliknya, saat Anda melakukan float: left, div tidak bergantung satu sama lain dan Anda dapat menyelaraskannya menggunakan margin dengan mudah.