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

StackOverflow https://stackoverflow.com/questions/212705

  •  03-07-2019
  •  | 
  •  

Вопрос

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

div.foo {
  clear: both;
}

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

"Плавающие элементы не допускаются ни с левой, ни с правой стороны".

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

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

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

Ответ

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

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

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

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

Это было полезно?

Решение

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

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

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

Другие советы

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

Да, при очистке перемещается только тот элемент, к которому он применяется. Однако результат выглядит по-разному в зависимости от того, является ли элемент & Quot; in flow & Quot; или из потока. Я думаю, это вас смущает.

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

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

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

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

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

float: left;
clear: right;

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

Технические характеристики доступны здесь: http://www.w3.org/ TR / REC-CSS2 /

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top