Почему ширина родительского блока (float:left) не зависит от сдвига одного из вложенных блоков?

Question

[privetstas]

Есть три блока. Один родитель и два вложенных - все со свойством float: left;
Вложенные блоки делят ширину родительского (30% и 70%).
Второй из вложенных блоков имеет отрицательный марджин равный собственной ширине (margin-left: -70%).
Тем не менее родительский блок занимает ту же ширину, как будто вложенный блок не был сдвинут.
Онлайн пример

1) - Почему родительский блок не сужается?
2) - Каким образом блоки высчитывают ширину?

Предполагаю что родительский блок высчитывает ширину из общей ширины вложенных блоков.
А ширина вложенных зависит от их контента.
Но почему-то сдвиг вложенных блоков не влияет на родителя.
(Где можно почитать про правила их поведения)?)

Answer 1

[L0k1]

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

а вообще еще в 12 году задавались подобными вопросами habrahabr.ru/post/136622

Comments

[privetstas]

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

Статья тоже полезная хотя в ней я не нашел рассуждений касательно моего вопроса.

Ниже, в ответе приведу ссылку на пример.

Answer 2

[privetstas]

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

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