Столько, сколько ответ Страгера уже объясняет столько, сколько вам нужно знать о том, почему это происходит, а именно о том, что это происходит так, как это происходит в браузерах, отличных от IE, потому что спецификации так говорят - я думаю, что он выбрал неправильную цитату из раздела спецификации CSS 2.1 о сворачивающихся полей .
Процитированный им пункт объясняет, как могут сжиматься поля, а не как они могут "перемещаться" к родительскому элементу.
Это скорее объясняет:
- Если верхнее и нижнее поля бокса соприкасаются, то поля могут сжиматься. В этом случае положение элемента зависит от его связи с другими элементами, поля которых свернуты.
- Если поля элемента свернуты с верхним полем его родителя, то край верхней границы поля определяется так же, как край родителя.
Или, в несколько более удобочитаемой форме, в документации для разработчиков Mozilla :
Родитель и первый / последний ребенок:
Если нет границы, отступа, встроенного содержимого или свободного пространства для разделения поля margin верхнего элемента с его верхним полем его первого дочернего блока, или нет границы, отступа, встроенного содержимого, высоты, минимальной высоты или max-height, чтобы отделить поле margin-bottom блока с полем margin его последнего потомка, после чего эти поля свернутся. Свернутое поле заканчивается за пределами родительского элемента.
Что касается того, как это исправить, я бы, наверное, выбрал решение overflow: auto Крис Ллойд предложил (столько, сколько это может иметь побочные эффекты).
Но тогда это действительно зависит от того, как именно выглядит остальная часть вашего кода. В этом простом примере вы можете легко изменить margin на дочернем элементе на padding на родительском элементе.
Или вы можете использовать дочерний элемент или просто позиционировать его ...
Или как насчет обратного clearfix , если вы хотите стать действительно модным:
.outer:before {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}