浮動小数点要素を浮動小数点要素にする

Question

現在、浮動小数点数とその周囲を囲んでいないコンテナの動作に関する問題があります。

浮動要素をラップするアイテムのリストがあります。これは非常に単純化したバージョンである。このようなものになります

<ul class="items"> 
    <li><img src="" />Text here</li> 
    <li><img src="" />More text</li> 
</ul> 

CSS：

ul.items li 
{ 
    display: block; 
    border: 1px solid pink; 
} 

ul.items li img 
{ 
    float: left; 
} 

を以前私がラップアラウンドし、それを展開する各リスト項目の下部にある「クリア」アイテムを追加しました画像。これはTony Aslett's CSS versionに相当します。例はhereです。

残念ながら、リストの左側にメニューが表示されています。つまり、クリアを追加すると最初の項目の下に大きなスペースができます。これは上記のページのの下に記載されています。警告の単語（これは重要です）。効果はhereで見ることができます。

オーバーフロープロパティを使用してPaul O'Brienから見つかった別の解決方法に従った。これは魅力のように機能します。残念ながら、左のメニューに加えて、各リスト項目の右上にはメニューが表示されていました。 overflow: autoでは、これらの項目は外側にプッシュされます。これはhereで見ることができます。マークアップは次のようになります。

<ul class="items"> 
    <li> 
     <div class="floaty">*</div> 
     <div class="item"> 
      <div class="img"></div>Text here 
     </div> 
    </li> 
    <li> 
     <div class="floaty">*</div> 
     <div class="item"> 
      <div class="img"></div>More text 
     </div> 
    </li> 
</ul> 

この方法を使用して「アイテム」要素の内側に滞在する「フワッ」要素を取得する方法はありますか？また、私は行方不明の別の解決策がありますか？

Answer 1

ここではユースケース全体が何であるかはわかりませんが、.floaty要素の場合は、floatの代わりにpositionを使用するのが妥当でしょうか？

ul.items li { position: relative; } 
div.floaty { float: none; position: absolute; top: 0; right: 0; } 

Fiddle