Float и схлопывающиеся отступы

[troll]

По каким принципам определяется положение floated-блока, когда он находится между двумя блоками со схлопывающимися отступами? Например, в такой ситуации:

<div class="upper" style="margin-bottom: 30px;">some content</div>
<div class="floated" style="float: left;">some content</div>
<div class="lower" style="margin-top: 50px;">some content</div>

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

[Vlad]

На плавающие блоки схлопывание не действует, соответственно, между первым и вторым будет расстояние 50 пикселов. Второй блок между ними располагается.

[troll]

А между .upper и .floated тогда сколько? 30px? Получается, у .upper 2 отступа (один общий с .lower, другой между .upper и .floated)?

[psywalker]

На самом деле lower просто имеет отступ 50пк от блока upper, а средний болтается между ними.

Зацени этот пример:

<div class="upper" style="margin-bottom: 0px;background:blue;">some content</div>
<div class="floated" style="float: left; background:red;">some content</div>
<div class="lower" style="margin-top: 0px;background:blue;">some content</div>

[troll]

Болтается на каком расстоянии от блоков? Почему именно на таком? Повторюсь, меня интересует не взаимное расположение в каком-то конкретном случае (пример я привел просто чтобы было понятнее, о чем идет речь), а принцип размещения блоков.

[psywalker]

Болтается на каком расстоянии от блоков? Почему именно на таком? Повторюсь, меня интересует не взаимное расположение в каком-то конкретном случае (пример я привел просто чтобы было понятнее, о чем идет речь), а принцип размещения блоков.

Тебе нужна книга Эрика Майера, глава про флоаты. Там всё описано подробно.

[troll]

Именно во время чтения книги Мейера и возник вопрос, заданный в данном топике) Насколько я понял, флоат в описанном случае размещается так, как будто его родителем является анонимный блочный бокс. Поскольку кроме флоата, который вне потока, в боксе ничего нет, он должен иметь нулевую высоту и подпадать под правило о collapsed through margins. Но до меня так и не дошло, как это правило в действительности работает.

[psywalker]

Именно во время чтения книги Мейера и возник вопрос, заданный в данном топике) Насколько я понял, флоат в описанном случае размещается так, как будто его родителем является анонимный блочный бокс. Поскольку кроме флоата, который вне потока, в боксе ничего нет, он должен иметь нулевую высоту и подпадать под правило о collapsed through margins. Но до меня так и не дошло, как это правило в действительности работает.

1. У твоего флоата нет родителя, а если бы был, то он бы схлопнулся в 0. Высота его.

2. Соседние блоки не замечают блок с флоатом, поэтому осттупы между ними регулируются между собой.

[amelice]

Именно во время чтения книги Мейера и возник вопрос, заданный в данном топике) Насколько я понял, флоат в описанном случае размещается так, как будто его родителем является анонимный блочный бокс. Поскольку кроме флоата, который вне потока, в боксе ничего нет, он должен иметь нулевую высоту и подпадать под правило о collapsed through margins. Но до меня так и не дошло, как это правило в действительности работает.

1. У твоего флоата нет родителя, а если бы был, то он бы схлопнулся в 0. Высота его.

Как же нет? Не может быть чтоб у блока нету блока контейнера(родителя). Если тут явно не задано, то я думаю, что родитель всех трех блоков боди.

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

Edited August 5, 2011 by cheburek

[psywalker]

cheburek,

Как же нет? Не может быть чтоб у блока нету блока контейнера(родителя). Если тут явно не задано, то я думаю, что это боди.

Ну это да, условно можно сказать так.

Высота перемещаемого блока зависит от содержимого, значит высота его это высота текста.

Тут надо уточнить. Высота именно флоат блока, а не его родителя.

А вообще в данном примере он должен был перекрыть первый блок. По правилам перемещаемый блок распологается максимально высоко и максимально влево. а тут я тоже не понимаю?

А вот тут ты не совсем правильно поняла. В том то и дело, что максимально! А значит ДО верхнего блока, так как он блочный и по умолчанию растягивается на 100% в ширину, и мало того - он находится в потоке, а не выпадает из него, как например абсолют. Поэтому блок с флоат, следуемый за ним находится именно ДО него, а не НА нём.

Поняла?

[amelice]

Тут надо уточнить. Высота именно флоат блока, а не его родителя.

Как раз это имела в виду, то есть высоту самого флоат блока.

А вот тут ты не совсем правильно поняла. В том то и дело, что максимально! А значит ДО верхнего блока, так как он блочный и по умолчанию растягивается на 100% в ширину, и мало того - он находится в потоке, а не выпадает из него, как например абсолют. Поэтому блок с флоат, следуемый за ним находится именно ДО него, а не НА нём.

Поняла?

Да, спасибо. Понятно. Тогда понятно почему флоат блок застрял между этими двумя.

1.У первого блока нижний маргин 30пк.

2.за ним следует флоат элемент, он учитвает его, расположился сразу за ним.

3.Но так как обычные блоки не учитывают флоатов, они между собой расположились как будто бы нету флоата.

Edited August 5, 2011 by cheburek

[psywalker]

Тут надо уточнить. Высота именно флоат блока, а не его родителя.

Как раз это имела в виду, то есть высоту самого флоат блока.

А вот тут ты не совсем правильно поняла. В том то и дело, что максимально! А значит ДО верхнего блока, так как он блочный и по умолчанию растягивается на 100% в ширину, и мало того - он находится в потоке, а не выпадает из него, как например абсолют. Поэтому блок с флоат, следуемый за ним находится именно ДО него, а не НА нём.

Поняла?

Да, спасибо. Понятно. Тогда понятно почему флоат блок застрял между этими двумя.

1.У первого блока нижний маргин 30пк.

2.за ним следует флоат элемент, он учитвает его, расположился сразу за ним.

3.Но так как обычные блоки не учитывают флоатов, они между собой расположились как будто бы нету флоата.

[amelice]

[troll]

А вот тут ты не совсем правильно поняла. В том то и дело, что максимально! А значит ДО верхнего блока, так как он блочный и по умолчанию растягивается на 100% в ширину, и мало того - он находится в потоке, а не выпадает из него, как например абсолют. Поэтому блок с флоат, следуемый за ним находится именно ДО него, а не НА нём.

Поняла?

Я не понял) Пусть верхний блок в потоке, так ведь флоат-то - нет. Следовательно, на него должны действовать не обычные правила, а особые, отдельно определенные в спецификации. В частности, там указано 4 правила, управляющих вертикальным размещением: верх флоата не должен быть выше верха контейнера, верха предшествующих блоков, строк и флоатов, а также должен быть расположен максимально высоко с учетом указанных ограничений. Нигде не сказано (по крайней мере я не увидел), что верх флоата должен быть ниже низа предшествующего блока.

Edited August 5, 2011 by troll

[psywalker]

А вот тут ты не совсем правильно поняла. В том то и дело, что максимально! А значит ДО верхнего блока, так как он блочный и по умолчанию растягивается на 100% в ширину, и мало того - он находится в потоке, а не выпадает из него, как например абсолют. Поэтому блок с флоат, следуемый за ним находится именно ДО него, а не НА нём.

Поняла?

Я не понял) Пусть верхний блок в потоке, так ведь флоат-то - нет. Следовательно, на него должны действовать не обычные правила, а особые, отдельно определенные в спецификации. В частности, там указано 4 правила, управляющих вертикальным размещением: верх флоата не должен быть выше верха контейнера, верха предшествующих блоков, строк и флоатов, а также должен быть расположен максимально высоко с учетом указанных ограничений. Нигде не сказано (по крайней мере я не увидел), что верх флоата должен быть ниже низа предшествующего блока.

Ну и что? НО там же написано, что он Максимально поднимается наверх. А максимум у него там, где уже он протиснуться не может. В нашем случае его предел, это верхний див.

А то, что ты хочешь - это уже абсолюты, которым пофиг на поток, потому что они из него выпадают напрочь.

[troll]

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

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

Edited August 5, 2011 by troll

[Vlad]

Если формально подходить, то флоаты не выпадают из потока. Просто есть нормальный поток, а есть флоаты, на них распространяются разные правила.

И что значит "должны учитывать положение соседних элементов"? На флоаты влияют соседние элементы, это практикой подтверждается и спецификации не противоречит.

[sigma77]

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

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

Ну авторитетней источника, чем этот я не знаю.

Флоаты, конечно выпадают из потока, но учитывают при этом окружающий контент.

[troll]

И что значит "должны учитывать положение соседних элементов"? На флоаты влияют соседние элементы, это практикой подтверждается и спецификации не противоречит.

Да, стоит признать, я выразился неточно. Соседние элементы, конечно, влияют на положение флоатов, а вот каким образом и где этот момент разъясняется в спецификации... Внятные ответы на данные вопросы (главным образом на последний) пока, по-моему, не были сформулированы.

Флоаты, конечно выпадают из потока

Мнения разделились) Я лично склонен согласиться с вами, хотя бы потому, что флоаты в обычных обстоятельствах не оказывают влияния на следующие за ними блочные боксы нормального потока.

Ну авторитетней источника, чем этот я не знаю.

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

[sigma77]

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

А какой тогда для вас источник авторитетен? Ну откройте того же Мейера стр.237, вроде есть он у вас, и читайте конкретные правила.

Ну еще хорошая статья есть - http://www.alistapart.com/articles/css-floats-101/

[JIyHa]

Насколько я понимаю, к схемам позиционирования относятся:

• Абсолютное
  
• Относительное
  
• Статическое
  
• Фиксированное
  

И они позиционируются.

Абсолютное - относительно блока-контейнера и выпадает из нормального потока и перемещает его в указанное место, а оставшаяся дырка схлопывается,элемент изъят из нормального потока и не влияет на другие элементы.(не с этим ли позиционированием путает автор флоаты?)

Относительное позиционируется относительно нормального потока.

Фиксированное относительно окна браузера.

А вот плавающее размещение - это НЕ схема позиционирования (Языки HTML и CSS М. Хольцшлаг, стр.223)

И также из книги Философия CSS дизайна Дэйв Ши и М. Хольцшлаг стр.94 "Достоинство верстки методом плавающих элементов состоит в том, что элемент не изымается из нормального потока и соседние элементы знают о его положении".

[troll]

JIyHa, не все так однозначно. Надеюсь, вы простите мне кривости перевода:

А вот плавающее размещение - это НЕ схема позиционирования (Языки HTML и CSS М. Хольцшлаг, стр.223)

В CSS 2.1 бокс может располагаться согласно трем схемам позиционирования:

1. Нормальный поток

2. Флоат

3. Абсолютное позиционирование

И также из книги Философия CSS дизайна Дэйв Ши и М. Хольцшлаг стр.94 "Достоинство верстки методом плавающих элементов состоит в том, что элемент не изымается из нормального потока и соседние элементы знают о его положении".

Элемент считается вне потока, если он флоат, абсолютно позиционирован или является корневым... Поскольку флоат вне потока, непозиционированные блочные боксы перед и после флоата располагаются по вертикали так, как если бы флоат не существовал.

Источник

[Seva1986]

По каким принципам определяется положение floated-блока, когда он находится между двумя блоками со схлопывающимися отступами? Например, в такой ситуации:

<div class="upper" style="margin-bottom: 30px;">some content</div>
<div class="floated" style="float: left;">some content</div>
<div class="lower" style="margin-top: 50px;">some content</div>

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

в данных условиях с этой разметкой и css будет следующее :

средний блок c float, своим вехним краем прижмётся к нижниму краю поля вышестоящего блока.

нижний блок будет лезть вверх до тех пор пока не упрёться во чтото что будет находиться в нормальном потоке тоесть самый первый див, так как они оба в нормальном потоке их поля схлопнутся и примут значение большего тоесть 50px

если убрать у нижнего блока margin то растояние между ним и первым блоком будет 30 px, а тескст нижнего блока будет обтекать флоат справа....

не знаю что непонятно в Мейер я это именно из него когдато выучил даже помню там помойму 9 правил поведения флоатов... помойму он всё доступно пишет... правдо уже устарел малость...

[JIyHa]

troll,

Элемент считается вне потока, если он флоат, абсолютно позиционирован или является корневым...

Не вижу разногласия. Чтобы элемент с флоатом в твоей разметке выпал из потока и не влиял на другие элементы его следует абсолютно позиционировать, либо его родительский элемент. Так как он не абсолютно, а статически позиционирован в твоем примере, из потока он не выпадает.

[troll]

JIyHa, вы неверно истолковали этот отрывок. position: absolute устанавливает float в none, из чего следует, что плавающий элемент не может быть позиционирован абсолютно. Корневой элемент - это html в HTML.

[JIyHa]

troll

Корневой элемент - это html в HTML.

Я в курсе. И в этом корневом элементе элементы с флоат позиционируются в нормальном потоке, но если ты для своего дива с флоат сделаешь родительский элемент с абсолютным позиционированием, то и родительский элемент, и все его содержимое будет абсолютно позиционировано для элементов в нормальном потоке

<div class="upper" style="margin-bottom: 30px;">some content</div>
<div class="absolute" style="position: absolute;">
	<div class="floated" style="float: left;">some content</div>
	<div class="floated2" style="float: left;">some content</div>
</div>
<div class="lower" style="margin-top: 50px;">some content</div>

В этом случае дивы с флоатами выпадут из нормального потока. Потому что их родитель выпал. А пока их родитель <html>, они будут в нормальном потоке.