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

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

, но он также имеет еще одну интересную особенность в сочетании с margin: auto...

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

здесь

4 67
css centering overflow css-float hidden-field

4 ответа:

можно использовать 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;

70

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

10

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

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

Если Родительский div не должен быть position: relative, просто установите дочерние стили в visibility: visible.

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

вот дерьмовый пример просто разместить в 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>
7

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

1