Почему когда использую float теряется высота родителя?

Question

[Shuboanator]

Почему при использовании float у меня теряется высота родительского блока? и как этого можно обойти?

Comments

[Юрий Лобанов]

Вы уже успели задать еще вопрос, а на этот считаете, что ответ не получен?

Answer 1

[onetwoprod]

.clearfix { display: block; }
.clearfix:after { content: ""; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; margin: 0; padding: 0; }

Применить к родителю

Comments

[Алексей]

Проверил - рабочий способ, посоны, дерзайте.

[dimasbog]

эврика, йопты!

Answer 2

[Дамир Рысаев]

Элементы с float создают новый контекст наложения и выпадают из потока элементов.

Comments

[Shuboanator]

а как это можно обойти?

[Никита Рябин]

@Shuboanator используйте position и margin'ы

[Дамир Рысаев]

@Shuboanato очиситить поток при помощи clearfix, как вариант :) micro clearfix hack

[Евгений Петров]

И причём тут контекст? Вот, к примеру, блок с position:relative создаёт контекст. И что?

[Дамир Рысаев]

@Petroveg просто информация к сведению. Что float создаёт новый контекст наложения и выпадает из потока. Я не писал, что он выпадает из потока из-за того, что создаёт новый контекст.

[Евгений Петров]

Вопрос про normal flow, а вы пишете про stacking context.
И это не считая того, что никакого контекста наложения блок только за счёт float не создаёт.

[Дамир Рысаев]

@Petroveg спасибо за ликбез.
У меня первая часть предложения про контекст наложения, вторая про поток элементов. Почему-то в моей голове была информация, что float создаёт контекст наложения. Нужно взять за правило периодически перечитывать спецификацию. Ещё не написал, что выпадают элементы только с float (left | right), т.к. по умолчанию float: none не думаю, что автор применял его к элементу, да и не выпадал бы тогда элемент из потока.

Answer 3

[Максим Гирченко]

Попробуйте добавить родителю overflow: hidden; это решит проблему потери высоты родителя.

Answer 4

[Юрий Лобанов]

Почитайте, например, эту статью
habrahabr.ru/post/136588
или эту
css-tricks.ru/Articles/Details/AllAboutFloats