Stil = "açık: her ikisi" ne işe yarar?

98

Tarzına sahip divolanı gördüm clear:both! Kullanımı nedir cleariçinde style?

<div style="clear:both">

html css

— Thomasbabuj
kaynak

249

clear:both öğenin, belgede kendisinden önce gelen kayan öğelerin altına düşmesini sağlar.

Ayrıca, clear:leftveya clear:rightyalnızca sola veya sağa kayan öğelerin altına düşmesini sağlamak için de kullanabilirsiniz .

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

— RichieHindle
kaynak

2

Ayrıca ebeveyn div'in yüksekliğe sığmasını sağlar.

— Oleg

@Jason, bahsettiğiniz hata yalnızca Windows XP'de Internet Explorer 6 için geçerlidir. Bu günlerde çoğu zaman onu desteklememize gerek olmaması iyi bir şey.

— Yevgeniy Afanasyev

5

@YevgeniyAfanasyev, evet, bu doğru. Yorumum, hala geçerli olduğu 2009 yılına ait.

— Jason

20

Sadece RichieHindle'ın cevabına eklemek için, CSS kayan ve temizlemenin nasıl çalıştığı konusunda size yol gösteren Floatutorial'a bakın .

— Paul Dixon
kaynak

1

15 Şubat 2016'da Floatutorial için sunucuya bağlanamadım (bağlantı 80 numaralı bağlantı noktasında reddedildi).

— dlu

3

Genişliksiz float kullandığınızda, bu satırda biraz boşluk kalır. Bu alanı bloke etmek için bir clear:both;sonraki elementte kullanabilirsiniz .

— imdad
kaynak