html - 左の画像フロートが div の外に出る

Question

テキストと画像を組み合わせましたが、猫は親divから出ていきます。それを修正する方法はありますか？

http://jsfiddle.net/qn5LM/

<div style="border:1px solid #CCCCCC">
    <img style="float: left;" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

Answer 1

空の要素を追加せずにそれを行う方法:

このCSSを追加

.clearfix:after {
     visibility: hidden;
     display: block;
     font-size: 0;
     content: " ";
     clear: both;
     height: 0;
     }
.clearfix { display: inline-block; }
/* start commented backslash hack \*/
* html .clearfix { height: 1%; }
.clearfix { display: block; }
/* close commented backslash hack */

クラス clearfix を div に追加します

<div style="border:1px solid #CCCCCC" class="clearfix">
    <img style="float: left;" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text

</div>

http://jsfiddle.net/qn5LM/11/

Answer 2

float:left親divにも追加

デモ

また

overflow:auto親divに追加

Answer 3

正しい方法はoverflow: hidden、outer-div のスタイルに追加することです。jsFiddleを参照してください

<div style="border:1px solid #CCCCCC; overflow: hidden">
    <img style="float: left;" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

Answer 4

position: absoluteを div に 追加するだけです...

<div style="border:1px solid #CCCCCC; position:absolute;">
    <img style="float: left" src="http://placekitten.com/g/200/200" height="100px" width="100px" border="1px"/>
Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text Text
</div>

Answer 5

要素をフローティングする場合、それらをドキュメントの元の流れから外します。

オーバーフローの適用:hidden; 親要素への接続は、これを回避する簡単な方法です。

詳細については、clearfix をご覧ください。

http://css-tricks.com/snippets/css/clear-fix/

その点に注意してください：

オーバーフロー: 非表示; また、オーバーフローを非表示にしますが、これは状況によっては望ましくない動作になる可能性があります。

Answer 6

これをテキストの後に追加します<div style="clear:both;"></div>

デモ