img with float：leftはコンテナを尊重しませんか？

Question

は、それはこのように行われます。このHTMLで

http://img815.imageshack.us/img815/2608/senzatitolo1c.png

：

<div style="border:1px solid"> 
    <img style="float:left"> text 
</div> 

Answer 1

は、画像が含まれているためにあなたのコンテナにoverflow: autoを追加します。フローティングは要素をフローから引き出します。

Answer 2

最後にフロートをクリアする必要があります。 （テストされていません）

<div style="border:1px solid"> 
    <img style="float:left;" /> text 
    <div style='clear:both;'></div> 
</div> 

Answer 3

divを閉じる前に、<div style="clear: left;"></div>を追加する必要があります。

<div style="border:1px solid"> 
    <img style="float:left"> text 

    <div style="clear: left;"></div> 
</div> 

Answer 4

style="clear: both;"で（最も一般的に見られるが、brとdivある）任意の要素を追加します。

Answer 5

あなたが浮い要素がそのコンテナを尊重することを確保したい場合は、この種のコードを使用する必要があります。

<div style="border:1px solid"> 
    <img style="float:left"> text 
    <div style="clear: both"></div> 
</div> 

Answer 6

は、フロートを追加：DIVに残しました。これで問題は解決されます

<div style="border:1px solid;float:left"> 
    <img style="float:left" src=""> text 
</div> 

Answer 7

コンテナの終了タグの前に<div style="clear: left;"></div>を追加してください。

Answer 8

タイトル：フロートと IMG：左は設計上のコンテナ

を尊重していない、コンテナを尊重することになっていません。以下で説明するW3C仕様に従って、浮動要素は通常のコンテンツフローには含まれなくなりました。

ただし、親コンテナ内に浮遊したコンテンツを十分に拡大するように強制する2つの一般的な方法があります。

方法＃1（clear性で空要素を使用）：

<div style="border: 1px solid;"> 
    <img style="float: left;"> text 
    <div style="clear: both;"></div> 
</div> 

方法＃2（浮上要素の親にoverflowプロパティを使用）：

<div style="border: 1px solid; overflow: hidden;"> 
    <img style="float: left;"> text 
</div> 

この場合、方法2を使用すると、autoまたはhiddenを使用するのに違いはありません。親が必要に応じて展開できるので、クリップされず、スクロールバーが表示されません。

---

W3C Spec: 9 Visual formatting model, 9.5 Floats

フロート現在 ラインの左または右にシフトされるボックスです。浮動小数点型（浮動小数点型または浮動小数点型浮動小数点型浮動小数点型浮動小数点型浮動小数点型浮動小数点型浮動小数点型）の最も興味深い特性は、コンテンツがその側に沿って流れることがあることです（または、「クリア」プロパティによって禁止されている ）。コンテンツは、 の左フローティングボックスの右側に流れ、 右フロートボックスの左側に流れます。以下はfloatの紹介です。 ポジショニングとコンテンツフロー。浮動小数点の振る舞いを規定する正確な規則は、floatプロパティの説明で与えられています。

フローティングボックスは、その外側のエッジ が別のフロートの包含するブロックエッジまたは外側のエッジに接触するまで、左または右にシフトされます。 ラインボックスがある場合、フローティングボックスの外側上部は、現在のラインボックスの上部に に揃えられています。

フロートのための十分な水平スペースがない場合、フロートが収まるか浮動小数点がそれ以上存在しなくなるまで、 を下方にシフトします。

浮動小数点数はフローに含まれないため、浮動小数点数が ではないように、浮動小数点ボックスの前後に垂直方向のフローを で作成します。しかし、フロートの の隣に作成された現在のラインボックスとそれに続くラインボックスは、フロートのマージンボックス のためのスペースを確保するために必要に応じて短縮されます。

そして、ここでは例の全体の束です...正確に質問です何

W3C Spec: 9 Visual formatting model, 9.8 Comparison of normal flow, floats, and absolute positioning