In Search of the Holy Grailをフォローしていますが、ステップ3で実際に何が起こっているのか理解できません。
問題を解決するために、「左」と「右」のdivのマージン/オフセットを無効にしました。これにより、コンテンツが上部に表示され、次に、他の2つの要素がその下に並んで表示されます[P1を参照]。
次に、「左」divのマージン左を0pxから-199pxに徐々に減らしました。これも、期待どおりの動作をします[P2を参照]。
ただし、-200px（左の要素自体の幅）では、コンテンツの右端に対して左端を使用して、上部に向かってシュートします[P3を参照] 。私はそれがただ端から外れ続けることを期待していたでしょう。
なぜ跳ね上がるのですか？そして、その理由についての概念的な説明がない場合、仕様のどこでその機能を説明していますか？
画像：
#contentと#left（および#right）の両方がフロートしていることを忘れないでください。
フロートの性質上、フロート（またはその内容）が重なる場合があります。これは仕様のこのセクションで詳しく説明されており、かなり理解しやすいです。別のフロートに隣接するフロート要素に負のマージンを適用すると、その兄弟の上leftで、その要素は単純に左に移動します（相対オフセットがあるのと同様） 。
floatプロパティのセクションには、「フロートの動作を管理する正確なルール」のリストがあります。今、私はフロートモデルに100％精通していませんが、これらの点は私が関連すると信じているものです：
2.現在のボックスが左フローティングで、ソースドキュメントの前の要素によって生成された左フローティングボックスがある場合、そのような前のボックスごとに、現在のボックスの左外縁が以前のボックスの右外縁、またはその上部は、以前のボックスの下部よりも低くする必要があります。同様のルールが右フローティングボックスにも当てはまります。1
7.左側に別の左フローティングボックスがある左フローティングボックスは、それを含むブロックの右端の右側に右外縁がない場合があります。（大まかに言うと、左フロートは、すでに可能な限り左にある場合を除いて、右端で突き出ていない可能性があります。）同様のルールが右フローティング要素にも当てはまります。
8.フローティングボックスはできるだけ高く配置する必要があります。
9.左フローティングボックスはできるだけ左に、右フローティングボックスはできるだけ右に配置する必要があります。左/右にある位置よりも高い位置が優先されます。
つまり、私の推測では、-200pxのマージンは、#left要素自体の幅に相当する負の値であり、要素を（左ではなく）右端まで浮かせて、それ自体も浮いている要素のエッジ。この完全で等しい負のマージンのために、両方の要素の右端が互いに接触しています。したがって、負のマージンを増やし続ける（または減らしますか？）と、要素が左に移動し続けることがわかります。#center#left
要素に適用されたパディング#containerはマージンと相互作用しないことに注意してください。片側または両側のパディングを削除しても、マージンは同じように相互作用します。
1仕様のリンクされたセクションの マージンの折りたたみに関するセクションに、負のマージンの動作を説明するステートメントがあることにも注意してください。ただし、ここで関係するマージンは水平であり、浮動要素に属しているため、これは無関係です。したがって、折りたたみの影響を受けることはありません。
<h2>左右の見出しにタグを使用していますが、中央で使用し<h1>ているため、この問題を解決したい場合は、この問題が発生します。1つすべての<h2>タグを見出しに使用し、使用する場合は、以下のクラスを適用します。
h1
{
margin-top:10px;
}