Как на самом деле работает очистка CSS?

Question

У меня есть <div>, который я хочу быть на линии сам по себе. Согласно W3Schools , это правило:

div.foo {
  clear: both;
}

... должно означать это:

«Не допускается использование плавающих элементов ни слева, ни справа.»

Однако, если я пропущу два <div> элемента влево и приму правило выше к первому, второй не сдвинется с места.

С другой стороны, если я применяю "clear: left" ко второму <div>, он перемещается вниз к следующей строке. Это мой обычный подход, но я не понимаю, почему я должен делать это так.

Плохо ли изложено описание W3Schools выше, или я что-то упустил? Может ли правило очистки перемещать только элемент, к которому оно применено?

Ответ

Спасибо Michael S и John D за хорошие объяснения. Уоррен указал на спецификацию CSS2 , и вот где я нашел этот ответ (выделение мое):

Это свойство указывает, какие стороны ящика (ов) элемента не могут быть смежными с ранее плавающим ящиком.

Итак: clear влияет только на положение элемента, к которому он применяется, относительно элементов, которые появляются перед ним в коде.

Разочаровывает, что я не могу сказать своим <div>, чтобы другие дивы двигались вниз, но это перерывы. :)

Answer 1

Когда вы применяете clear к элементу, он будет перемещать элемент TH, чтобы у него не было элементов слева или справа от него. Он не перемещает никакие другие элементы, он просто перемещает элемент в положение, когда вокруг него ничего нет.

Редактировать

Элементы выше очищенного элемента не перемещаются, элементы ниже элемента МОГУТ быть перемещены. Также обратите внимание на дополнительный комментарий в комментариях

Answer 2

Да, при очистке перемещается только тот элемент, к которому он применяется. Однако результат ощущается по-разному в зависимости от того, находится ли элемент «в потоке» или нет. Я думаю, это вас смущает.

Если элемент находится в потоке, очистка перемещает его вниз вместе со всем, что следует. Думайте об этом как о перемещении текущей позиции пера (место, где должен быть расположен следующий элемент) вниз. Такое поведение легко понять.

Если элемент находится вне потока, как показано в примере с плавающей точкой, перемещается только элемент, позиция пера остается на том же месте, если другие правила не заставляют их двигаться. Например, плавание не может начинаться выше предыдущего плавания.

Существует также беспорядочная проблема разрушения полей. Очистка прерывает их, иногда неинтуитивно.

Answer 3

Ваш CSS анализирует "правильно". Ваш второй div все еще перемещается влево, поэтому даже после того, как вы очистите первый, если для второго есть место по ширине, он поместится с плавающим слева в самой верхней точке, которую он может.

Answer 4

Вы применяете очистку к элементу, который вы хотите в новой строке. То, что вы используете, зависит от тех элементов, которые вам не нужны. Если вы хотите, чтобы изображение B находилось в новой строке и не касалось изображения A (что, скажем, означает «float: left»), вы должны поместить изображение B как {clear: left}, не понятное справа, как вы обычно думаете. Вы очищаете поплавок предыдущего элемента.

Answer 5

Я обычно делаю следующее для этого эффекта:

float: left;
clear: right;

Я не знаю, относится ли это просто к элементу, к которому он применяется, хотя имеет смысл.

Спецификации доступны здесь, хотя: http://www.w3.org/TR/REC-CSS2/