float

div.test { float: none;}
div.test1 { float: left;}
div.test2 { float: right;}

<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
<p>ここはp要素です。手前にいる要素が浮動要素のため、このテキストは回りこんで配置されます。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>

<div style="float: right; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>
<p>ここはp要素です。手前にいる要素が浮動要素のため、このテキストは回りこんで配置されます。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>

<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
<div style="float: right; width: 200px; background-color: #00ffff;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>

要素を左右に寄せる形で配置します。『float』プロパティが『none』以外に指定された要素は『浮動要素』と呼ばれ、浮動要素とされた要素は全てブロックレベル要素として扱われます。要素を浮動要素とさせたい場合は必ず『width』プロパティを『auto』以外の値に指定する必要があります。『width』プロパティが『auto』の場合は包含ブロックと同じ横幅となってしまうため、浮動要素として期待されるような配置となりません。

<div style="float: left; background-color: #ff0;">ここはdiv要素です。『float: left』と指定していますが『width』プロパティの指定がないため、通常の浮動要素としての配置となりません。</div>
<p>ここはp要素です。手前にいる要素に『width』プロパティの指定がないため、このテキストは回りこまれた形での配置となりません。</p>

『float』プロパティに『left』と指定された要素は包含ブロックの左側に寄せる形で配置されます。続く要素は右側に回りこむ形で配置されます。

<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
<p>ここはp要素です。手前にいる要素が浮動要素のため、このテキストは回りこんで配置されます。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>

『float』プロパティに『right』と指定された要素は包含ブロックの右側に寄せる形で配置されます。続く要素は左側に回りこむ形で配置されます。

<div style="float: right; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>
<p>ここはp要素です。手前にいる要素が浮動要素のため、このテキストは回りこんで配置されます。テキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキストテキスト。</p>

通常、『height』プロパティが『auto』となっている親要素は子要素の高さを自身の高さとして算出できますが、浮動要素は通常のドキュメントフローから切り離された形で配置されますので親要素は浮動要素となっている子要素の高さを自身の高さに算出できません。

<p>以下はdiv要素の中に浮動要素となっているdiv要素を配置しています。親のdiv要素(赤枠の要素)は子要素の高さを算出できないため高さが『0』になります。</p>
<div style="border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>
</div>

これを予防するには、親要素の高さに子要素の高さを直接指定する、『overflow』プロパティに『visible』以外の値を指定する、『clear』プロパティに『both』や『left』、『right』と指定された要素を最後の子要素として配置する、等を行う必要があります。

<p>以下はdiv要素の中に浮動要素となっているdiv要素を配置しています。親のdiv要素(赤枠の要素)に『overflow: auto』と指定し子要素の高さを算出しています。</p>
<div style="overflow: auto; border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>
</div>

<p>以下はdiv要素の中に浮動要素となっているdiv要素を配置しています。親のdiv要素(赤枠の要素)の最後の子要素に『clear: both』と指定し子要素の高さを算出しています。</p>
<div style="border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>
	<div style="background-color: #0f9; clear: both;">ここはdiv要素です。『clear: both』と指定しています。</div>
</div>

その他の手法として、『clearfix』という方法があります。これは親要素の『:after疑似要素』に『clear: both』を指定することで浮動要素の高さを算出できるようにする手法です。

/* 『clearfix』の一例です。以下は必要最低限の記述となっているため、最新のブラウザでしか動きません。ご注意ください。 */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

<style scoped>
.clearfix:after {
	content: "";
	display: block;
	clear: both;
}
</style>

<p>以下はdiv要素の中に浮動要素となっているdiv要素を配置しています。親のdiv要素(赤枠の要素)に『clearfix』を使用して子要素の高さを算出しています。</p>
	<div class="clearfix" style="border: solid 2px #f00;">
	<div style="float: left; width: 200px; background-color: #ff0;">ここはdiv要素です。『float: left』、『width: 200px』と指定しています。</div>
	<div style="float: right; width: 200px; background-color: #00ffff;">ここはdiv要素です。『float: right』、『width: 200px』と指定しています。</div>
</div>

そして、浮動要素のマージンの相殺は一切行われません。こちらも合わせてご注意ください。