Apa gunanya style = "clear: keduanya"?

98

Saya kebetulan melihat divyang memiliki gaya clear:both! Apa gunanya cleardalam style?

<div style="clear:both">

html css

— thomasbabuj
sumber

249

clear:both membuat elemen berada di bawah elemen mengambang yang mendahuluinya di dokumen.

Anda juga dapat menggunakan clear:leftatau clear:rightmenjatuhkannya di bawah hanya elemen yang telah diapungkan ke kiri atau ke kanan.

+------------+ +--------------------+
|            | |                    |
| float:left | |   without clear    |
|            | |                    |
|            | +--------------------+
|            | +--------------------+
|            | |                    |
|            | |  with clear:right  |
|            | |  (no effect here,  |
|            | |   as there is no   |
|            | |   float:right      |
|            | |   element)         |
|            | |                    |
|            | +--------------------+
|            |
+------------+
+---------------------+
|                     |
|   with clear:left   |
|    or clear:both    |
|                     |
+---------------------+

— RichieHindle
sumber

2

Juga membuat div induk agar sesuai dengan tingginya.

— Oleg

@Jason, bug yang Anda maksud hanya berlaku untuk Internet Explorer 6 pada Windows XP. Untunglah kita tidak perlu mendukungnya hampir sepanjang hari ini.

— Yevgeniy Afanasyev

5

@YevgeniyAfanasyev, ya, ini benar. Komentar saya berasal dari tahun 2009 ketika itu masih berlaku.

— Jason

20

Hanya untuk menambah jawaban RichieHindle, lihat Floatutorial , yang memandu Anda melalui cara kerja CSS floating dan clearing.

— Paul Dixon
sumber

1

Pada 15 Feb 2016, saya tidak dapat terhubung ke server untuk Floatutorial (koneksi ditolak pada port 80).

— dlu

3

Saat Anda menggunakan float tanpa lebar, masih ada ruang di baris itu. Untuk memblokir ruang ini, Anda dapat menggunakan clear:both;elemen berikutnya.

— imdad
sumber