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

127

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?

Ryan
sumber
@Moak Pertanyaan khusus itu adalah tentang inline, bukan inline-block. Tapi yang pertama terkait bagus: stackoverflow.com/a/11823622/918414
ThinkingStiff
2
link contoh sudah mati
information_interchange

Jawaban:

156

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

Alex W.
sumber
4
"clearfix" hanyalah sebuah nama; "perbaikan" menunjukkan perbaikan harapan yang salah dan / atau penerapan browser yang salah. Saya (dengan senang hati) setuju bahwa ada alternatif selain floating / clearing, tetapi tidak ada yang secara inheren rusak atau diperbaiki.
Tim Medora
10
@Alex - Apakah ada cara non-hacky, kompatibel lintas-browser untuk menghapus spasi antara elemen blok-sebaris yang berada di baris terpisah? Saya ingin berhenti menggunakan pelampung tetapi tautan terbaik yang saya temukan tentang masalah ini (di sini dan di sini ) tidak memuaskan. Anda menyebutkan white-spacepropertinya - dapatkah Anda menjelaskannya?
antinome
3
@Alex - terima kasih, itu sangat keren, tetapi saya masih menemukan pendekatan float-with-modern-clearfix sedikit lebih dapat dipelihara, karena tidak akan rusak jika suatu hari saya menyesuaikan letter-spacingdi tempat lain di CSS saya.
antinome
1
mengapa bootstrap masih menggunakan float untuk sistem gridnya? Bukankah itu tata letak?
AzDesign
2
Perlu diingat bahwa blok-sebaris menambahkan ruang putih di sekitar elemen. Jika Anda menggunakannya untuk kisi, atau tidak menginginkan ruang putih ini, Anda harus menambahkan gaya tambahan / peretasan HTML ke akun untuk ini. Lihat: css-tricks.com/fighting-the-space-between-inline-block-elements/…
kretzm
23

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:

pengguna56reinstatemonica8
sumber
apakah ada solusi yang mungkin untuk tidak ada spasi-antara, mungkin div+(whitespace) {display:none}atau sesuatu?
NoBugs
1
Lihat paragraf ketiga setelah kalimat pertama ... Terutama lihat pertanyaan terkait
user56reinstatemonica8
@NoBugs cukup terapkan font-size: 0; ke elemen yang mengandung, berhati-hatilah jika Anda tidak memiliki ukuran font tertentu yang disetel pada elemen di dalam blok-sebaris !!
Jai
@Jai Persis, dan karena styling / view harus terpisah dari proses pembuatan html / model, itu adalah praktik yang buruk. (Bagaimana jika Anda menggunakan layanan yang memberi Anda <div class="inlinething">hi</div> <div class="inlinething">there</div> more content here... ?)
NoBugs
4

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

Vins
sumber
6
Ya, itu karena Anda harus menghindari penggunaan spasi antar elemen karena blok sebaris memperhitungkan ruang dengan cara yang sama seperti elemen sebaris. Jaga agar tag blok-sebaris tetap erat satu sama lain dan tidak ada masalah dengan piksel.
Ben Sinclair
Juga ini bisa menjadi perbedaan browser dengan padding / margin default pada elemen .. Yah setidaknya di masa lalu saya selalu melakukannya * {padding:0px; margin:0px; }karena ini membantu menyeimbangkan pengkodean saya
Angry 84
Apakah ini alasan Bootstrap (mungkin orang lain) menggunakannya daripada inline-block?
NoBugs
1

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

abhijit
sumber
1

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.

Sydney
sumber