Плавающие div в абсолютном div не расширяют родительский элемент.Clearfix, похоже, не работает

Question

У меня есть такая проблема: два плавающих элемента div внутри абсолютного родительского элемента div.

CSS:

.wrapper {
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden; /* doesn't do anything! */
}
.left {
    float: left;
}
.right {
    float: right;
}
.clear {
    clear: both;
}

HTML:

<div class="wrapper">
    <div class="left">some text here</div>
    <div class="right">some text here too</div>
    <div class="clear"></div>
</div>

В Firefox, если у оболочки нет position:absolute, все работает, как задумано.Как только я сделаю его абсолютным, оболочка сжимается, а содержимое в плавающем divs перекрывает остальную часть документа.Кроме того, если я установлю ширину оболочки на 100%, она будет перекрывать вертикальную полосу прокрутки.

Чего мне не хватает?

Answer 1

Поскольку вы используете overflow: hidden clearfix, div.clear совершенно не требуется. Но , поскольку вы также позиционируете свою обертку абсолютно, overflow: hidden clearfix также не требуется, поскольку position: absolute также исправит (по крайней мере, в Chrome и FF).

http://jsfiddle.net/j6jkk/

Answer 2

Плавающий элемент выводит его из потока документов. Это означает, что он не будет влиять на размеры родительского элемента, и абсолютно позиционированные элементы по умолчанию имеют размер 0 x 0. Очистка следующего родственного элемента элемента floated будет только расширять ширину родительского контейнера, если у вас действительно есть содержимое в этом элементе, его ширина установлена ​​в его стиле, или один из его других родственных элементов, все еще находящихся в потоке документа, имеет ширину больше, чем начальная ширина родителя.

См. Эту статью в Mozilla Developer Network, хотя это верно для CSS в целом, а не только для Firefox:

float - MDN

Относительно проблемы width: 100%, если родителем смещения для оболочки является документ, это может быть то, как Firefox реагирует на стиль позиционирования. Вы могли бы облегчить это, поместив абсолютно позиционированный элемент в пустой div с позицией, установленной в relative.

Answer 3

Попробуйте добавить это:

.wrapper{
    display: inline-block;
}