解 説

赤、緑、青のdivでできたボックスが通常フローしています。
float2
これにfloatを設定して次のように横並びにしたいのですが、うまくいきません。
float1
通常フローのHTMLは次のようになっています。

フロートさせるためにcssは次のように指定します。

結果は次のようになります。
float3
赤は真ん中に来てくれません。これはfloatの向きを変えてみても同様で真ん中には来ません。

ここでfloatと併用してpositionを設定します。floatと併用するにはpositionはrelativeにする必要があります。

‘position’の値が’absolute’あるいは’fixed’であれば、’display’は’block’に、’float’は’none’に(強制的に)設定されます。 ボックスの位置は、’top’、’right’、’bottom’、’left’という4つのプロパティと包含ブロックによって決まります。つまり、relativeならfloatとpositionの併用は可能です。

手順

  1. 青は左にフロートし、赤と緑を右にフロートさせます。これで左から青、緑、赤の順に並びます。
  2. 次にそれぞれ3つのdivにposition:relativeを設定します。
  3. 赤のdivを幅分だけ左に移動させます。left:-300pxとします。
  4. 緑はdivの幅分だけ右に移動させます。left:300pxとします。

これで赤が真ん中に来ます。
float1