Яке використання стилю = "ясно: і те й інше"?

98

Я випадково побачив divякий мав стиль clear:both! Що таке використання clearв style?

<div style="clear:both">

html css

— thomasbabuj
джерело

249

clear:both робить елемент опускатися нижче будь-яких плаваючих елементів, які передують йому в документі.

Ви також можете використовувати clear:leftабо clear:rightзмусити його опускатися нижче лише тих елементів, які плавали ліворуч або праворуч.

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

— RichieHindle
джерело

2

Крім того, це робить батьків діть відповідно до висоти.

— Олег

@Jason, помилка, на яку ви посилаєтесь, застосовна лише для Internet Explorer 6 у Windows XP. Це добре, що нам не потрібно підтримувати це більшість разів у ці дні.

— Євген Афанасьєв

5

@YevgeniyAfanasyev, так, це правда. Мій коментар з 2009 року, коли це все ще застосовувалося.

— Джейсон

20

Для того, щоб додати відповідь RichieHindle, перегляньте Floatutorial , який перегляне вас, як працює плаваючий та очищаючий CSS.

— Пол Діксон
джерело

1

15 лютого 2016 року мені не вдалося підключитися до сервера для Floatutorial (підключення відмовлено на порту 80).

— dlu

3

Якщо ви використовуєте float без ширини, у цьому рядку залишається місце. Для блокування цього простору можна використовувати clear:both;наступний елемент.

— імдад
джерело