1.要素の回り込みを指定する「float」
「float」は要素を浮かせて左右のどちらかに寄せることができるCSSプロパティです。指定した要素のあとに続く要素は右か左に回り込みます。
サンプルのHTMLを見てみましょう。
サンプルHTML：
<p>
<img src="cat.jpg" width="200" height="200">
これは猫の画像です。この猫の画像の右に、文章が回り込むようにしてみましょう。
</p>
プレビュー：
何も指定をせずに画像のあとに文章が続くと、画像の右側に大きな空白ができてしまいます。
そこで画像に対してfloatをleft（左）で指定してみます。
サンプルCSS：
img { float : left ; }
プレビュー：
画像が左、右側に文章が回り込みました。
続いて画像に対してfloatをright（右）に指定してみます。
サンプルCSS：
img { float : right ; }
プレビュー：
画像が右、左側に文章が回り込みました。
文章が長く、画像の高さを超えると、横幅いっぱいまで文章が表示されます。
2.回り込みを解除する「claer」
「clear」は「float」による回り込みを解除するためのCSSプロパティです。floatと同様に「left」「right」、そしてclearのみの値として「both」が指定できます。
サンプルのHTMLを見てみましょう。
サンプルHTML：
<img src="cat.jpg" width="120" height="120">
<img src="dog.jpg" width="120" height="120">
<img src="hamster.jpg" width="120" height="120">
サンプルCSS：
img { float : left ; }
プレビュー：
3つの画像のうち、最後のハムスターの画像だけ、回り込みを解除してみましょう。
サンプル HTML：
<img src="cat.jpg" width="120" height="120">
<img src="dog.jpg" width="120" height="120">
<img src="hamster.jpg" width="120" height="120" class="clearfix">
サンプルCSS：
img { float : left ; }
.clearfix { clear : both ; }
プレビュー：
3.floatやclearの使い所
floatとclearの使い方はなんとなくご理解いただけかと思いますので、実際にどういったレイアウトを組むときに利用するのか、サンプルを用意してみました。
以下のようなレイアウトをHTMLとCSSで組んでいきましょう。
プレビュー：
まずはHTMLです。
サンプルHTML：
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<section>
<img src="cat.jpg" width="120" height="120">
<h1>猫について</h1>
<p>猫は魚が大好物で、「にゃーん」と鳴きます。</p>
</section>
<section>
<img src="dog.jpg" width="120" height="120">
<h1>犬について</h1>
<p>犬はかしこく、「ワンワン」と吠えます。ペットとしても非常に人気があり、小型〜大型まで様々な種類があります。嗅覚や聴覚が鋭いため、警察犬や盲導犬として人間の行動を助けてくれることもあります。喜ぶとしっぽをふるのが可愛らしいですね。</p>
</section>
<section>
<img src="hamster.jpg" width="120" height="120">
<h1>ハムスターについて</h1>
<p>ハムスターの大好物はひまわりです。</p> </section>
</body>
</html>
続いてCSSです。sectionには余白とボーダーを付けて、画像は左側にfloatさせて、テキストを右側に回り込ませました。
特徴的なのがsectionに対してafter要素という疑似要素と呼ばれるものを用意し、それに対してclearfix（回り込みを解除すること）しています。
img{
float: left;
margin-right: 16px;
}
section{
border-bottom: solid 1px #ccc;
padding-bottom: 16px;
margin-bottom: 16px;
}
section:after{
display: block;
content: "";
clear: both;
}
clearfixをしないとどうなるか、参考に見てみましょう。
プレビュー：
このようにレイアウトが崩れてしまいます。
floatを使う場合は、文字や画像などの要素が増えたときに、レイアウト崩れが発生しないか確かめるようにしましょう。
