Clearance_html/css_WEB-IT折り畳まれたマージンの鼻

BFC では、垂直方向に隣接するブロックレベルのボックスによってマージンの崩壊が発生します。この記事では、垂直方向の 2 つのブロックレベルのボックスの間にフローティング要素がある場合の特殊なマージンの崩壊について説明します。 . 別れる場合、現時点ではどのような影響があるのでしょうか？

.outer{        overflow: auto;        width: 300px;        height: 500px;        border: 2px solid #6666FF;    }    .box{        width: 100px;        height: 100px;        font-family: "simhei";        }    .top{        margin-bottom: 20px;        background: #CC6600;    }    .float{        /*float: left;*/浮动部分被注释掉了    }    .bottom{        margin-top: 10px;            background: #33FF66;    }

<div class="outer">        <div class="top box">top</div>        <div class="float"></div>        <div class="bottom box">bottom</div>    </div>

エフェクト画像:

Paste_Image.png

次に、中間 div を設定します:

.float{        float: left;        margin-bottom: 10px;        background: #9900CC;        width: 50px;        height: 50px;    }

<div class="float">float</div>

エフェクト画像:

Paste_Image.png

浮動要素が影響を受けないことがわかります。後続のブロック レベル ボックスとその前のブロック レベル ボックスの余白が折りたたまれます。 しかし、bottom を使用して float をクリアすると

.bottom{        margin-top: 10px;            background: #33FF66;        clear: both;    }

レンダリング:

Paste_Image.png

以下のことがわかります: float 属性をクリアする要素を使用すると、そのマージン折りたたみルールは次のルールになります。フローティング ボックス border-top は常にフローティング要素の margin-bottom の底部と一致します。閉じたフローティング ボックスのマージン上部とトップ ボックスのマージン下部の底部との間の距離をクリアランスと呼びます。検証:

1. マージン-top

   .float{     float: left;     margin-top: 10px;     margin-bottom: 10px;     background: #9900CC;     width: 50px;     height: 50px; }

   をフローティング要素に追加します

Paste_Image.png

2. フローティング要素の高さとマージンを調整します

.float{        float: left;        margin-top: 5px;        margin-bottom: 5px;        background: #9900CC;        width: 50px;        height: 5px;    }    .bottom{        margin-top: 20px;            background: #33FF66;        clear: both;    }

レンダリング:

Paste_Image.png

これでtimebottom 要素の margin-top と上部要素の margin-bottom が 5px 重なっています。この時のクリアランスの値は-5pxです。上記２つの検証により、浮動要素がある場合に、閉じた浮動要素のクリアランスがどのように計算されるかを知ることができます。 基本原則は、閉じた浮動要素の境界上部が浮動要素のマージン下部と一致することです。

フローティング要素の理解

また、上記の検証 2 から、フローティング要素はボーダーやパディングなどのシールドマージンの崩れるプロパティとは異なるため、フローティング時にフローティング要素であると結論付けることもできます。要素が BFC 内の隣接するボックスを分離するのに十分な大きさではない場合、隣接するボックスの垂直方向のマージンは重なり続けます。

参考:

http://www.w3cplus.com/css/ Understanding-bfc-and-margin-collapse.html