Спецификация CSS 2.1: 8.3.1 Сворачивающиеся поля: невозможно правильно интерпретировать особый случай: требуется разъяснение

Раздел 8.3.1 спецификации CSS 2.1 о сворачивании полей гласит:

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

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

Оператор рассматривает элемент X, для которого:

  • X имеет зазор, поэтому любой из вариантов «очистить: слева;», «очистить: справа»; или "очистить: оба"; к нему применены свойства.

  • Поскольку верхние и нижние поля X соприкасаются, в случае нормального потока мы рассматриваем сценарий, в котором:

    • X has one parent above and one sibling below, or
    • X имеет одного родственного брата выше и одного родственного брата ниже, или
    • У X есть один родной брат выше и один родитель ниже

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

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

Я совершенно сбит с толку. Может ли кто-нибудь объяснить это утверждение лучше, возможно, с несколькими иллюстративными примерами? Спасибо.


css collapse margin margins
person John Sonderson    schedule 03.11.2013    source источник
comment
В Интернете есть бесчисленное множество ресурсов о сворачивании полей. прочитайте кучу и попробуйте код. Пример: reference.sitepoint.com/css/collapsingmargins   -  person j08691    schedule 03.11.2013
comment
Привет. Спасибо за ответ. Я прочитал этот пост и понял все, кроме очищенных элементов (они не сворачивают свои верхние поля с нижним полем родительского блока). Тут картинка не помешала бы. Если верхнее поле элемента совпадает с нижним полем родительского блока, для меня это означает, что высота дочернего элемента равна нулю. Не имеет никакого смысла. Возможно, кто-то может это объяснить.   -  person John Sonderson    schedule 03.11.2013
comment
Однако это не отвечает на мой вопрос. Как я могу интерпретировать этот раздел спецификации?   -  person John Sonderson    schedule 03.11.2013
comment
Это хороший вопрос. Попытки скрипки, демонстрирующей правило, на самом деле ничего не демонстрируют. Поэтому я призываю всех, особенно людей, пытающихся закрыть это, придумать скрипку, у которой в этой ситуации на самом деле нет схлопывающихся полей.   -  person Mr Lister    schedule 04.11.2013
comment
Действительно, эта строка спецификации настолько озадачивает, что я даже хотел бы начать вознаграждение за этот вопрос, но я не вижу, где вариант запуска вознаграждения. Как я могу начать вознаграждение за этот вопрос?   -  person John Sonderson    schedule 04.11.2013
comment
О... Я хотел указать вам на раздел справки, в котором есть страница о том, как работают вознаграждения, но на странице не упоминается некоторые из условий, что вам нужно минимум 75 повторений, чтобы начать один. Я посмотрю, смогу ли я это исправить.   -  person Mr Lister    schedule 04.11.2013
comment
Спасибо. Похоже, у нас не будет ответа на этот вопрос, во всяком случае, пока.   -  person John Sonderson    schedule 05.11.2013
comment
Я думаю, что это утверждение на Sitepoint - просто плохая формулировка, и я понятия не имею, что они имеют в виду, поскольку, как вы правильно утверждаете, это не может иметь смысла, если ребенок не имеет нулевого роста. Я протестировал его, и он схлопывается, как и следовало ожидать, и это логичное поведение.   -  person Niels Keurentjes    schedule 22.11.2013
comment
Спасибо за ваше подтверждение. Было бы неплохо, если бы ошибка документации могла быть отправлена ​​​​в соответствующую рабочую группу W3C, возможно, с размещением ссылки на эту ветку. Любая идея, где было бы подходящее место для этого?   -  person John Sonderson    schedule 21.03.2015

Ответы (1)


arrow_upward
5
arrow_downward

Сначала пара уточнений:

  • Элемент с зазором — это элемент, у которого clear установлено на что-то отличное от none и фактически очищает число с плавающей запятой.

  • Элемент, у которого верхнее и нижнее поля примыкают, означает примыкание друг к другу, а не к соседним элементам. Мы говорим об элементе высотой 0 без рамки или отступов, поэтому верхнее и нижнее поля элемента соприкасаются друг с другом. Когда это происходит, они рушатся вместе, ситуация, известная как разрушение насквозь.

Теперь давайте рассмотрим пример:

body {
  border:solid;
}
#container {
	margin: 20px;
	background: blue;
}
#floated {
	float: left;
	width: 20px;
	height: 20px;
	background: red;
}
#cleared {
	clear: left;
  margin-top: 10px;
	margin-bottom: 20px;
}
#following {
	margin-top: 30px;
}
<body>
<div id=container>
  <div id=floated></div>
  <div id=cleared></div>
  <div id=following></div>
<div>
</body>

Поэкспериментируйте с этим здесь: http://jsbin.com/wuvilu/1/edit?html,css,output

Поскольку на теле есть рамка, вы можете видеть поле в 20 пикселей вокруг синего #container. Красный #floated также имеет очевидные размеры 20 на 20 пикселей.

Затем, поскольку высота равна 0 без отступов и границ, верхнее и нижнее поля #cleared схлопываются друг с другом. Они также примыкают к верхнему полю #following. Размер этого свернутого поля составляет 30 пикселей, самый большой из трех.

Так как #following имеет высоту 0 и не имеет отступов и границ, наше поле в 30 пикселей граничит с нижним полем #container и схлопывается вместе с ним. За исключением того, что правило, которое вы процитировали, срабатывает, а не срабатывает.

Поскольку он не схлопнется с нижним полем контейнера, его нужно поместить где-то внутри него. Где? Он начинается на 10 пикселей выше нижнего края #floater и простирается на 20 пикселей ниже. Почему? Верхнее поле #cleared — это самое верхнее поле, участвующее в этом сворачивающемся поле, поэтому мы начинаем с того места, где оно должно начинаться. Так как это 10 пикселей, наше свернутое поле начинается на 10 пикселей выше нижнего края #floater, элемента непосредственно перед ним.

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

person Florian Rivoal    schedule 18.04.2015
comment
Я не согласен с тем, что свертывание в целом было ужасной идеей — это буквально механика интервалов между абзацами CSS, что-то, что имело смысл в свое время. Единственная проблема заключается в том, что это действительно должно было быть ограничено разделением строк текста. Но CSS не может отличить два блочных контейнера, содержащих только IFC, от двух блочных блоков любой другой природы, и это ИМО является реальной причиной безумия, с которым нам приходится иметь дело сегодня. (Я понимаю, что вы можете просто сделать p+p { margin-top: 1em } или что-то в этом роде, но это не относится к делу.) - person BoltClock; 27.05.2016
comment
Я не говорил, что рушиться в целом было ужасной идеей. Только то, что обвал насквозь был. Свернуть нижнее поле <p> с верхним полем следующего <p> — хорошая идея. Сворачивание верхнего поля <p> с нижним полем того же <p>, когда оно пустое, было плохим. - person Florian Rivoal; 27.05.2016