Сделать дочерний элемент видимым вне переполнения: скрытый родитель

В CSS overflow:hidden устанавливается в родительских контейнерах, чтобы позволить ему расширяться с высотой их плавающих детей.

Но у него также есть еще одна интересная функция в сочетании с margin: auto...

Если PREVIOUS sibling - это плавающий элемент, он будет на самом деле отображаться рядом с ним. То есть, если sibling float:left, то контейнер с float:none overflow:hidden появится справа от брата, без новой строки - точно так же, как если бы он был плавающим в нормальном потоке. Если предыдущий брат - float:right, то контейнер появится слева от брата. Изменение размера этого контейнера будет точно отображать его в центре между плавающими элементами. Скажем, если у вас есть два предыдущих брата, один float:left другой float:right, контейнер появится в центре между ними.

Итак, проблема ...

Как сохранить этот тип макета БЕЗ маскировки детей?

Googling во всем Интернете дает мне способы как clear:both и расширять контейнер... но я не могу найти альтернативного решения для поддержания центрирования слева и справа. Если вы создадите контейнер overflow:visible, тогда контейнер неожиданно игнорирует поток макета плавающих элементов и появляется многоуровневым элементом плавающего элемента.

Итак вопрос:

Я должен иметь контейнер overflow:hidden для сохранения макета...

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

ИЛИ

Как мне overflow:visible, чтобы я мог абсолютно позиционировать дочерний элемент относительно родителя вне контейнера... YET сохранить параллельный поток float-like-layout-flow?

Ответ 1

Вы можете использовать clearfix для выполнения "сохранения макета" так же, как это делает overflow: hidden.

.clearfix:before,
.clearfix:after {
    content: ".";    
    display: block;    
    height: 0;    
    overflow: hidden; 
}
.clearfix:after { clear: both; }
.clearfix { zoom: 1; } /* IE < 8 */

добавьте класс class="clearfix" к родительскому объекту и удалите overflow: hidden;

Ответ 2

Ни один из опубликованных ответов не работал у меня. Однако установка position: absolute для дочернего элемента действительно работала.

Ответ 3

Это старый вопрос, но он сам столкнулся.

У меня есть полурешения, которые работают ситуационно для первого вопроса ( "Дети, видимые при переполнении: скрытый родитель" )

Если родительский div не должен быть позицией: relative, просто установите для дочерних стилей видимость: visible.

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

Вот скрупулезный пример, просто отправляемый в html файл для просмотра.

<div style="background: #ff00ff; overflow: hidden; width: 500px; height: 500px; position: relative;">
    <div style="background: #ff0000;position: fixed; top: 10px; left: 10px;">asd
        <div style="background: #00ffff; width: 200px; overflow: visible; position: absolute; visibility: visible; clear:both; height: 1000px; top: 100px; left: 10px;"> a</div>
    </div>
</div>

Ответ 4

Для других, если clearfix не решит это для вас, добавьте поля для не-плавающего родного брата, которые/являются такими же, как ширина плавающего брата (ов).