Saya ingin tahu mengapa tidak menggunakan display:inline-block sepanjang waktu BUKAN float:left. Inline-block tampaknya jauh lebih mudah untuk dikontrol dalam hal tata letak dan tidak memiliki masalah dengan harus membersihkan float dll. Saya mencoba memahami mengapa menggunakan satu daripada yang lain.

Terimakasih banyak,

Emily.

4
The Chewy 12 Maret 2017, 02:27

2 jawaban

Jawaban Terbaik

Tujuan float adalah untuk memungkinkan teks membungkusnya. Jadi dipindahkan ke sisi kiri atau kanan dan dikeluarkan dari alur halaman. Kotak baris yang berisi teks lain kemudian menghindari tumpang tindih dengan elemen melayang. Ini membentuk wadah blok tingkat blok. Itu tidak sejajar secara vertikal dengan konten lainnya.

body {
  width:300px; 
}
.float-example span {
  float:left;
  width: 100px;
  border:2px dashed red;
}
<section class="float-example">Lorem ipsum dolor sit amet, consectetur 
adipiscing elit, <span>I like to use float!</span> sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</section>

Tujuan dari inline-block adalah menjadi wadah blok yang berada di dalam kotak garis. Ini membentuk wadah blok inline-level dalam aliran konten normal. Ini disejajarkan secara vertikal dengan konten lain dari kotak garis tempatnya berada.

body {
  width:300px; 
}

.inline-block-example span {
  display:inline-block;
  width: 100px;
  border:2px dashed red;
}
<section class="inline-block-example">Lorem ipsum dolor sit amet, consectetur
adipiscing elit, <span>I like to use inline-block!</span> sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</section>
6
Alohci 12 Maret 2017, 00:32

Perbedaan terbesar adalah Anda tidak perlu menghapus elemen sebaris seperti yang Anda lakukan mengapung.

Float menghapus elemen dari aliran DOM normal - memungkinkan konten untuk membungkusnya. Ini juga berarti bahwa Anda perlu menghapus float pada objek berikutnya di markup untuk keluar dari kondisi float.

Inline-block tidak mengharuskan Anda untuk menghapus.

3
Korgrue 12 Maret 2017, 00:48