CSSはフォーマットのコンテキストをどのように動作させますか？

ブロック書式設定コンテキスト

フロート、絶対に配置された要素、ブロックボックスではないブロックコンテナ（インラインブロック、テーブルセル、テーブルキャプションなど）、および「目に見える」以外の「オーバーフロー」を備えたブロックボックス（その値がビューポートに伝播された場合を除く）新しいブロックフォーマットコンテキストを確立する内容については。

私の大胆なのは、確立する重要な点

これが意味するのは、使用する要素overflow（表示以外）またはfloat..Tcinline-blockが子要素のレイアウトに責任を負うことです。

ブロック書式設定のコンテキストでは、各ボックスの左外縁は包含ブロックの左縁に接します（右から左への書式設定の場合は右縁が接します）。

上記の行の意味:

ボックスは長方形のみで不規則な形状にはできないため、2 つのフロート間 (またはフロートの横) にある新しいブロック フォーマット コンテキストは、隣接するサイド フロートを囲みません。内側の子ボックスは、親の左端 (RTL の場合は右端) に触れるまでしか拡張できません。この動作は、列スタイルのレイアウトに役立ちます。ただし、この動作の主な用途は、たとえば「メイン コンテンツ」div 内のフロートを停止し、フロートされたサイド列 (つまり、ソース コードで先に出現するフロート) を実際にクリアすることです。

フロートクリアランス

通常の状況では、フロートは以前のすべてのフロート要素をクリアすることになっています。これは、以前はソースコード全体に浮かんでいます。

このプロパティは、要素のボックスのどの辺が前のフローティングボックスに隣接してはいけないかを示します。「clear」プロパティは、要素自体の内部のフロートや他のブロックフォーマットのコンテキストでは

たとえば、左と右の列がそれぞれ左と右にフロートされている 3 列のレイアウトがあるとします。サイド カラムはフロートされているため、新しいブロック フォーマット コンテキストになります (フロートは新しい BFC を確立するプロパティの 1 つでもあることに注意してください)。そのため、それらの内部のリスト要素をフロートできます。サイド カラム内にすでにあるフロートのみがクリアされ、ソース コード内の以前のフロートは考慮されなくなります。

##メインコンテンツを新しいブロックフォーマットコンテキストにするかどうか？

これで、中央の列は、両側からマージンを設定するだけで、両側のフロート列の間にきちんと収まるように表示され、残りの幅が確保されます。これは、中央の列が「流動的」である場合に、希望する幅を得るための一般的な方法です。コンテンツ div 内でフロート/クリアランスを使用する必要があるまでは、これで問題ありません (「clearfix」ハックまたはそれを含むテンプレートを使用している場合はよくあることです)。

この非常に単純なコードを見てみましょう:

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated">this a floated box</div>
</div>

.clear-r {clear: right;}

<div class="floated clear-r"> this a floated cleared box</div>

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  margin: 0 200px;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

#left-col {
  border: 1px solid #000;
  width: 180px;
  float: left;
}
#right-col {
  border: 1px solid #000;
  width: 180px;
  float: right;
  height: 200px;
}
#content {
  background: #eee;
  overflow: hidden;
}
.floated {
  float: right;
  width: 180px;
  height: 100px;
  background: #dad;
}
.clear-r {
  clear: right;
}

<div id="left-col">left column</div>
<div id="right-col">right column</div>

<div id="content">
  <h3>Main Content</h3>
  <p>Lorem ipsum etc..</p>
  <div class="floated">this a floated box</div>
  <div class="floated clear-r">this a floated cleared box</div>
</div>

#content {
  background: #eee;
  color #000;
  border: 3px solid #444;
}
.float {
  background: rgba(0, 0, 255, 0.5);
  border: 1px solid #00f;
  width: 150px;
  height: 150px;
  float: left;
  margin: 10px;
}
p {
  background: #444;
  color: #fff;
}

<div id="content">
  <div class="float">floated box</div>
  <h3>This is a content box</h3>
  <p>it contains a left floated box, you can see the actual content div does go under the float, but that it is the &lt;h3&gt; and &lt;p&gt; <b>line boxes</b> that are shortened to make room for the float, this is normal behaviour</p>
</div>