float: ***;

floatは設定している要素を浮動化させるプロパティで、要素の横に回り込みをさせることができます。

▼CSS

div{
float:left;
}

▼HTML

<div>
このDIV要素を左側に寄せて、右側に後続の要素を回り込ませます。
</div>
<img src="../images/sample.jpg">

▼表示

このDIV要素を左側に寄せて、右側に後続の要素を回り込ませます。

通常は要素の下に表示されるものを指定の方向（右または左）に回り込ませることができます。

float:left;	設定した要素を左側に寄せ、後続の要素を右側に回り込ませる
float:left;	設定した要素を右側に寄せ、後続の要素を左側に回り込ませる
float:none;	後続の要素を回り込ませない

これをli要素に設定すると、横並びにすることができます。

▼通常の表示

▼CSS

li {
float: left;
}

▼CSS反映後の表示