Как работает очистка CSS?

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

div.foo {
  clear: both;
}

... должно означать следующее:

"Никаких плавающих элементов не разрешено ни с левой, ни с правой стороны".

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

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

Является ли описание W3Schools выше плохо сформулированным, или я что-то упускаю? Является ли правило очистки только способным перемещать элемент, к которому он применяется?

Ответ

Спасибо Майкл С. и Джон Д. за хорошие объяснения. Уоррен указал на спецификацию CSS2 и что там, где я нашел этот ответ (выделение мое):

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

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

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

Ответ 1

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

Edit

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

Ответ 2

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

Ответ 3

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

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

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

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

Ответ 4

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

Ответ 5

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

float: left;
clear: right;

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

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