css - 比較的配置された要素が浮動要素を無視するのはなぜですか

Question

静的ブロック要素が浮動要素の後に続く場合、それはそれに利用可能な残りのスペースを埋めます。

したがって、たとえば.right、幅は80％になります。

.left {
    background-color: red;
    float: left;
    width: 20%;    
}

.right {
    background-color: blue;
}

ただし、position: relativefloat要素に続くブロック要素の場合、float要素は無視されているように見え、相対要素の幅は100％になります。

.left {
    background-color: red;
    float: left;
    width: 20%;    
}

.right {
    background-color: blue;
    position: relative;
}

W3Cによると、「ボックスが通常の流れに従って配置されたり、浮いたりすると、この位置に対してシフトする可能性があります」（出典）

leftでは、要素のorまたは位置を変更しない場合right、通常のフローにとどまるのではなく、親要素の左端に設定されるのはなぜですか？

score 3 · Accepted Answer

position:relativeCSSの位置のオーバーライドがなかった場合に要素が存在していたであろう位置を指します。たとえば、その自然な変更されていない位置です。

フロートされた要素は基本的にドキュメントの配置計算から削除されるため、left要素はright要素の配置に対して非表示になります。したがって、次に高い要素のサイズ（これらの2つの左/右ボックスが含まれるコンテナ）が必要になります。

1 に答える 1