画像の下にテキストが回り込まないようにする

何も指定しない場合は、テキストが画像の下に回り込みます。
これをCSSで回り込まないようにします。

Contents

1 HTML
2 CSS
3 サンプル

HTML

<div class="section">  
<p class="img"><img src="image/001.jpg" alt="サンプル画像" width="150" height="100"></p>  
<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>  
</div>

<p>テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト</p>

</div>

CSS

.section  {  
    width: 400px;  
    border: 2px solid #CCC; 
		padding: 10px; 
    _zoom: 1;     
    overflow: hidden;  
}  

.img   {
	float: left; 
}  

.section p    {
	margin: 10px;
	overflow: hidden; 
	_zoom: 1; 
}

.section {

width: 400px;

border: 2px solid #CCC;

padding: 10px;

_zoom: 1;

overflow: hidden;

}

.img {

float: left;

}

.section p {

margin: 10px;

overflow: hidden;

_zoom: 1;

}

サンプル

40web

36歳のときにそれまで勤めていた金融業界を卒業、地に足の着いた生活がしたいと東京・渋谷から房総へ移住。Webデザイナー養成校に通い、40歳のときにWebデザイナーとして独立。地方在住・40歳・コネなしからスタートして、現在は仲間と会社を作るまでに成長。今の興味は資産形成とブロックチェーン。ビットコインのマイニングもやってます。