cssレイアウトでのBFCの問題

1.インタビューの質問-二国間距離（マージンの重複）

1. マージンオーバーラップとは何ですか？
2. どのような状況でマージンの重複が発生しますか？
3. 重複するマージンを解決するにはどうすればよいですか？

マージンオーバーラップ：両方のボックスのマージンが設定されている場合、垂直方向では、2つのボックスのマージンがオーバーラップし、最終結果が絶対値の大きいページに表示されます。

マージンが重複する場合は2つあります。

1.親子関係のマージンが重なっている

親子関係。子要素にマージンがある場合、親要素をBFCに変換せずに、親要素にもマージンがあります。

オーバーフローを追加：
親要素がBFCになるように親要素に非表示にし、子要素とのマージンがないようにします

<style>
.out {
     
     
background-color: #f00;
width: 200px;
height: 200px;
}

.inner{
     
     
margin-top: 50px;
width: 100px;
height: 100px;
background-color: blue;
}   
</style>
<div class="out">
    <div class="inner"></article>
</div>

2.同じレベルで重複する兄弟関係：

同じレベルの要素の外側の余白は垂直方向に重なり、最終的な外側の余白は2つの絶対値の大きい方になります。

  <style type="text/css">
            .fat {
     
     
                background-color: #ccc;
            }
            .fat .child-one {
     
     
                width: 100px;
                height: 100px;
                margin-bottom: 50px;
                background-color: #f00;
            }

            .fat .child-two {
     
     
                width: 100px;
                height: 100px;
                margin-top: 20px;
                background-color: #345890;
            }
        </style>
   <section class="fat">
        <div class="child-one"></div>
        <div class="child-two"></div>
    </section>

オーバーフローを設定できます：hidden;空の要素または疑似タイプの要素を追加してマージンが重複する問題を解決します

2.マージンの重複に答える—BFC

BFCとは何ですか？

BFCは「块级格式化上下文」を意味します。BFCは独立したレイアウト環境であり、内部要素を外部の影響から保護し、外部に影響を与えません。BFC自体はCSSレイアウト方式ですが、マージンフォールディングの問題を解決するために使用できます。BFCはこの問題を解決するために特別に作成されたものではありません。

BFCをトリガーする方法は？

ボックス属性値がこれらの場合、それが属するボックスはBFCを生成します。

• オーバーフロー：自動/非表示;
• 位置：絶対/固定;
• フロート：左/右;
• 表示：inline-block / table-cell / table-caption / flex / inline-flex

除去方法を使用することもできます。

オーバーフローの値は表示されません。positionの値は
静的ではないか
、相対フロート
の値はnoneではありません。displayの値はinline-blockまたはtable-cellまたはflexまたはtable-captionまたは
inline-flexです。

BFCの原理は？（インタビューでそれについて話すのではなく、それを理解してください）

1. BFC内のボックスは、垂直方向に1つずつ配置されます。マージンオーバーラップは垂直方向にも発生します。
2. BFCはページ上の独立したコンテナです。コンテナ内の子要素は外部要素に影響を与えず、外部は内部に影響を与えません。
3. BFCの領域はフロートとオーバーラップしません。
4. BFCの高さを計算するとき、浮動要素もカウントされます。

BFCの適用

1.アダプティブレイアウトに使用できます

このBFCの原理を使用して、左側が固定幅、右側が適応型の2列レイアウトを実現できます。高さが等しくなくても、お互いに影響を与えることはありません。

オーバーフローを追加：右に非表示;フローティングによる外部左の影響を排除するためにBFCにします

<!-- BFC不与float重叠 -->
<section id="layout">
        <style media="screen">
          #layout{
     
     
            background: red;
            height: 200px;
          }
          #layout .left{
     
     
            float: left;
            width: 100px;
            height: 80px;
            background: blue;
          }
          #layout .right{
     
     
            height: 100px;
            background:green;
            overflow: hidden;
          }
        </style>
        <div class="left">left</div>
        <div class="right">right</div>
    </section>

2.フロートをクリアできます：

親要素を追加しoverflow:hidden/auto、BFCを変更します

<!-- BFC子元素即使是float也会参与计算 -->
      <style>
        #out{
     
     
          background: red;
          border: 1px solid black;
          overflow: hidden;
        }
        #inner{
     
     
          float: left;
           width: 200px;
           height: 200px;
           background-color: blue;
        }
      </style>
    <div id="out">
        <div id="inner">我是浮动元素</div>
    </div>

3.垂直マージンのオーバーラップを解決します。

上記のケースを参照してください