float – 方法1

.box {
	float: left;
}

.boxContainer {
	overflow: hidden;
}

/* clearfix */
.boxContainer:before,
.boxContainer:after {
    content: "";
    display: table;
}
 
.boxContainer:after {
    clear: both;
}
 
/* For IE 6/7 (trigger hasLayout) */
.boxContainer {
    zoom: 1;
}

基本中の基本、floatで横並びにする方法です。floatを使うことでボックスを左、または右に寄せ、後続のボックスを横に回りこませます。

デメリットは子要素を全てfloatさせた場合に、囲んでいるdiv要素の高さがなくなることです。
対策としては、囲んでいるdiv要素にoverflow: hidden;を指定するか、clearfixと呼ばれるCSSを指定します。 overflowはIE6,7では効きませんので、IEに対応させる場合はclearfixを使う必要があります。

[CSS]overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix | コリス

また、IE6特有のバグもあります。floatで指定した方向と同じ方向にマージンを指定するとマージンが2倍になるという通称ダブルマージンと呼ばれるバグです。
例えばfloat:leftさせた要素にmargin-left:10pxと指定するとIEでは20pxとして計算されます。これに関しては同じ方向にマージンを指定しないようにするしか方法はありません。

display: inline; – 方法2

.box {
	display: inline;
}

display:inlineを指定して横並びにする方法です。インライン要素となるので高さや横幅、上下マージンの指定はできません。
上下パディングは親要素の高さに影響を与えないので、子要素のボックスの高さが親を突き破って表示されています。

また、上の例では左右マージンの指定をしていないのでわかりませんが、下のマージンなしの例では隙間ができています。この隙間の正体は、「改行」です。要素の間にある改行がブラウザで隙間として表示されてしまうのが原因です。
これを避けるには改行せずにコードを書くか、改行をコメントアウトするかして改行を無くす必要があります。

<!-- 改行をコメントアウトする -->
<div id="boxContainer">
<div class="box">BOX1</div><!-- 
--><div class="box">BOX2</div><!-- 
--><div class="box">BOX3</div>
</div>

display: inline-block; – 方法3

.box {
	display: inline-block;
}

/* ハックでIE6,7のみに適用 */
html*.box {
	display: inline;
	zoom: 1;
}

並べたい要素にdisplay: inline-blockを指定してインラインブロックにする方法です。 インラインブロックはブロック要素のように高さや上下マージンを持ちながら横に並んでいくという便利な要素です。

しかしインラインブロックでもやはり隙間ができます。インラインと同様この隙間を何とかする必要があります。

IE6,7はインライン要素にはdisplay: inline-blockは効きますが、ブロック要素には効果がありませんので、一度インライン要素にしてからzoom:1を指定してhasLayoutをtrueにします。

inline-blockはもう使える（だいたい） | Takazudo Clipping*

display: table-cell; – 方法4

.box {
	display: table-cell;
}

テーブルセルにして横並びにする方法です。高さと横幅を指定することができ、パディングはありますが、マージンは消滅します。
インラインとは違って隙間はできません。

display: flex(inline-flex); + flex-direction: row; – 方法5

CSS3プロパティ、display: flexとflex-direction: rowによる横並び方法です。いわゆるフレキシブルボックス（レイアウト）というやつです。

横並びにさせる要素にCSSを当てるのではなく、囲んでいる要素に指定します。display: flexを指定するとデフォルトでflex-direction: rowになりますので、左から右へ流すだけならflex-directionは省略可能です。
inline-flexを指定した場合、要素（囲んでいる方）はインラインボックスとなります。

.boxContainer {
	display: flex;
	display: -moz-flex;
	display: -o-flex;
	display: -webkit-flex;
	display: -ms-flex;
	flex-direction: row;
	-moz-flex-direction: row;
	-o-flex-direction: row;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
}

display: flexはflex-direction、justify-content、align-items等々といったプロパティと組み合わせることによって、左から右への単純な横並びだけでなく、右から左、下から上への並び、さらに子要素を等間隔に配置といったことができるようになります。以下はrow-reverseで右から左へ、等間隔へ配置します。

.boxContainer {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	/* 長くなるのでベンダープレフィックスの記述は省略 */
}

このdisplay:flexを使ったレイアウト（フレキシブルボックスレイアウト）は非常に便利なのですが、仕様がなかなか固まらず、今後も変更される可能性があるので注意が必要です。（display: box→display: flex-box→display: flexと変遷）

display:flexについての詳細は以下を参考にしてください。
flexible ボックスメモ – hogehoge @teramako

display: box; + box-orient: horizontal; – 方法6（非推奨）

CSS3のdisplay: boxのプロパティは古い仕様です。ブラウザの実装も将来的に削除される可能性がありますので、display: flexを使用してください。

.boxContainer {
	display: box;
	display: -moz-box;
	display: -o-box;
	display: -webkit-box;
	display: -ms-box;
	box-orient: horizontal;
	-moz-box-orient: horizontal;
	-o-box-orient: horizontal;
	-webkit-box-orient: horizontal;
	-ms-box-orient: horizontal;
}