絶対divの浮動小数点divは親を展開していません。 Clearfixが動作しないようです。

Question

私はこの問題を抱えています。

CSS：

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

HTML：Firefoxので

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

、意図したとおりラッパーは、すべての作品、position:absoluteを持っていない場合。私が絶対にすると、ラッパーは縮小し、浮動小数点のコンテンツはdivsの文書の残りの部分と重なります。また、ラッパーの幅を100％に設定すると、垂直スクロールバーにオーバーラップします。

私には何が欠けていますか？この追加

Answer 1

試してください：あなたはoverflow: hidden clearfixを使用しているので

.wrapper{ 
    display: inline-block; 
} 

Answer 2

を、div.clearは全く不要です。 しかしあなたのラッパーを配置もしているので、絶対にoverflow: hidden clearfixがも不要position: absoluteは（少なくともChromeとFFで）clearfixも意志としてあります。要素を浮動

http://jsfiddle.net/j6jkk/

Answer 3

は、ドキュメントフローの外にそれを取ります。つまり、親の次元には影響しません。絶対配置される要素はデフォルトで0 x 0です。フローティング要素の次の兄弟要素を消去するのは、その要素に実際にコンテンツが含まれているか、幅がスタイルに設定されているか、文書フロー内の他の兄弟の幅が親の最初の幅。ラッパーのオフセット親が文書がwidth: 100%問題について

float - MDN

、ある場合：これは、だけでなく、Firefoxの一般的なCSSの真のですが

、Mozillaの開発者向けネットワークから、この記事を参照してください。これは、Firefoxがどのように測位スタイルに対応しているのかもしれない。絶対配置された要素を空のdivに配置し、位置をrelativeに設定することで、それを緩和することができます。