CSSフォーマットコンテキスト

CSSの非常に重要な部分は、BFCブロックレベルのフォーマットコンテキストです。この記事では、CSS BFCの関連知識を整理しています。入浴や着替えの後に、食べることをお勧めします。

BFCを正式に説明する前に、まずブラウザのマージンが重複する問題を理解しましょう。

マージンが重なる

MDN：ブロックの上下の余白（margin-top）と下部の余白（margin-bottom）は、単一の余白の最大サイズの単一の余白にマージ（折りたたみ）されることがあります（または、それらが等しい場合は、それらの間でのみ） a）、この動作はマージン崩壊と呼ばれます。注：マージンのオーバーラップはブロックレベルの要素で発生し、floatおよびposition=absoluteの要素はマージンのオーバーラップ動作を生成しません。

マージンが重なる状況は3つあります。

同じレベルの隣接する要素間：2つの隣接する要素間のマージンが重なっています。box1とbox2のマージンは200pxです

<style>
  div {
    width: 100px;
    height: 100px;
    background-color: pink;
  }
  .box1{
    margin-bottom: 100px;
  }
  .box2{
    margin-top: 200px;
  }
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码

**親要素と子孫要素を区切るコンテンツはありません：**境界線、パディング、インラインコンテンツがなく、ブロックレベルの書式設定コンテキストが作成されていない場合、親ブロック要素とその子孫ブロック要素は外側の境界線と重なります。部分は最終的に親ブロック要素の外側にオーバーフローします。次のようになります。ラッパーの上部マージンは100ピクセルで、ボックスとラッパーの間に100ピクセルの上部マージンはありません。

<style>
  .wrapper {
    width: 200px;
    height: 200px;
    background-color: pink;
  }
  .box{
    width: 100px;
    height: 100px;
    margin-top: 100px;
    background-color: powderblue;
  }
</style>
<div class="wrapper">
  <div class="box"></div>
</div>
复制代码

**空のブロックレベルの要素：**以下の例では、コンテンツ1とコンテンツ2の間に200pxの距離があります。

<style>
  div {
    margin-top: 100px;
    margin-bottom: 200px;
  }
</style>

<p>内容1</p>
<div></div>
<p>内容2</p>
复制代码

フォーマットコンテキスト

インラインフォーマットコンテキスト

インラインボックスは、書き込みモードの設定で決定された順序で次々に配置されます。

横書きモードの場合、ボックスは左から横に並べられます
縦書きモードの場合、ボックスは上から横に配置されます

.horizontal {
  writing-mode: horizontal-tb; // 从左开始
}

.vertical {
  writing-mode: vertical-rl; // 从上开始
}
复制代码

ブロックフォーマットコンテキスト

块格式化上下文（Block Formatting Context，BFC） 是 Web 页面的可视 CSS 渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。形成独立的渲染区域，内部元素的渲染不会影响外界。

总结来说具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。

触发BFC的条件「常见」

根元素（）
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block、table-cells、flex）
overflow 值不为 visible 的块元素 (hidden、auto、scroll)

BFC的特性

BFC是独立容器，容器内部元素不会影响容器外部元素。
计算BFC的高度时，浮动元素也参与计算。
BFC的区域不会与float的元素区域重叠。

注意：很多博客都会将属于同一个BFC的两个相邻盒子的margin会发生重叠认为是BFC的特性，不是！不是！没有触发 BFC 也是如此排列的。BFC 可以解决这种重叠，但对于margin重叠，我们通常不解决，合理利用就好了。

BFC的常用案例：

1、解决 margin 重叠

相邻子元素的重叠

内部的盒子会在垂直方向上一个接一个的放置，垂直方向上的距离由margin决定。BFC可以避免margin折叠，例子：

<style>
  .wrapper{
    border: 1px solid black;
  }
  .box {
    width: 200px;
    height: 200px;
    background-color: #999;
  }
  .box1 {
    margin-bottom: 100px;
  }
  .box2 {
    margin-top: 200px;
  }
</style>

<div class="wrapper">
  <div class="box1 box"></div>
  <div class="box2 box"></div>
</div>
复制代码

如下图，在普通文档流中，两个相邻容器的上下margin会重叠，并且取其最大的margin。

如果让其中一个盒子处于独立的BFC中，就不会重叠。如下图

<style>
  .wrapper{
    border: 1px solid black;
  }
  .wrapper2{
    overflow: hidden;
  }
  .box {
    width: 200px;
    height: 200px;
    background-color: #999;
  }
  .box1 {
    margin-bottom: 100px;
  }
  .box2 {
    margin-top: 200px;
  }
</style>

<div class="wrapper">
  <div class="wrapper2">
    <div class="box1 box"></div>
  </div>
  <div class="box2 box"></div>
</div>
复制代码

父子元素的margin重叠

<style>
  .wrapper{
    width: 200px;
    height: 200px;
    background: powderblue;
    overflow: hidden;
  }
  .box{
    width: 100px;
    height: 100px;
    margin-top: 100px;
    background: pink;
  }
  
</style>
<div class="wrapper">
  <div class="box"></div>
</div>
复制代码

下の図1は、BFCをトリガーせずに、ボックスのマージントップが親要素にオーバーフローすることを示しています。下の図2は、BFCがトリガーされ、内部要素が外部要素に影響を与えないことを示しています。

2.フロートの親要素の高さを広げます

BFCの高さを計算するとき、浮動要素も計算に関与します。これを使用して、親要素を引き伸ばすことができます。

<style>
  .wrapper{
    border: 1px solid black;
  }
  .box{
    width: 100px;
    height: 100px;
    background: pink;
    float: left;
  }
</style>
<div class="wrapper">
  <div class="box"></div>
</div>
复制代码

フロートは通常の流れから離れてフローティングフローを形成するため、親の高さは子要素によって引き伸ばされません。以下に示すように

BFCがトリガーされると、float要素が高さの計算にカウントされます。

<style>
  .wrapper{
    border: 1px solid black;
    overflow: hidden;
  }
  .box{
    width: 100px;
    height: 100px;
    background: pink;
    float: left;
  }
</style>
<div class="wrapper">
  <div class="box"></div>
</div>
复制代码

3、フローティングをクリアすることができます

BFCの領域は、フロートの要素領域とオーバーラップしません。したがって、フロートをクリアするために使用できます

<style>
  .box1{
    width: 100px;
    height: 100px;
    background: pink;
    float: left;
  }
  .box2{
    width: 200px;
    height: 200px;
    background: powderblue;
  }
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码

結果は次の図のようになります。ご覧のとおり、box2はbox1とオーバーラップします。

BFCをトリガーすると、フロートと重ならない下の画像を見ることができます

<style>
  .box1{
    width: 100px;
    height: 100px;
    background: pink;
    float: left;
  }
  .box2{
    width: 200px;
    height: 200px;
    background: powderblue;
    overflow: hidden;
  }
</style>
<div class="box1"></div>
<div class="box2"></div>
复制代码

4.2列および3列のレイアウトを実装します

BFCの領域は、フロートの要素領域とオーバーラップしません。この機能により、2列のレイアウトも可能になります。固定列に固定幅を設定し、非固定列にBFCを有効にします。

<style>
  .left{
    width: 100px;
    height: 100px;
    background: pink;
    float: left;
  }
  .right{
    height: 100px;
    background: powderblue;
    overflow: hidden;
  }
</style>
<div class="left"></div>
<div class="right"></div>
复制代码

3列のレイアウトは同じで、左右が固定されており、中央は固定されていません。中央の中央部分のdivは、左右の後ろに配置する必要があることに注意してください。

<style>
  .left {
    width: 100px;
    height: 100px;
    float: left;
    background: #ffc0cb;
  }
  .right {
    width: 100px;
    height: 100px;
    float: right;
    background: #ffc0cb;
  }
  .center{
    height: 100px;
    background: powderblue;
    overflow: hidden;
  }
</style>
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
复制代码

5.フロートテキストの折り返しを防ぎます。

それは役に立たないが、それは用途だ。

<style>
  .left {
    width: 100px;
    height: 100px;
    background: #ffc0cb;
    float: left;
  }
  p{
    width: 200px;
    background: powderblue;
    overflow: hidden;
  }
</style>
<div class="left"></div>
<p>
  你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界你好世界
</p>
复制代码

テキストの折り返しの新聞効果を実現するためにfloatを使用することがよくありますが、折り返したくない場合は、BFCの実装をトリガーできます。

それがあなたに役立つことを願っています、好きでフォローすることを忘れないでください〜