コードSpitz cssは第2部を呈する(ステップ37フィードバック)
オーバーフローを無効にする場合
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
background: rgba(0, 255, 0, 0.5);
}
.right {
float: right;
background: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<div style="width:500px">
<div class="left" style="width:200px;height:150px">1</div>
<div class="right" style="width:50px;height:150px">2</div>
<div class="right" style="width:50px;height:100px">3</div>
<div class="left" style="width:150px;height:50px">4</div>
<div class="right" style="width:150px;height:70px">5</div>
<div class="left" style="width:150px;height:50px">6</div>
<div class="left" style="width:150px;height:50px">7</div>
<div style="height:30px;background:skyblue">ABCDEFG</div>
<!-- div8 -->
</div>
</body>
</html>
BFCにはBFCが存在しており、INLINE-GARDの原則によれば、この場合floatがこの領域にABCDEFGを全て含むことは不可能であるため、7番目の真上に位置する.
オーバーフロー使用時
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.left {
float: left;
background: rgba(0, 255, 0, 0.5);
}
.right {
float: right;
background: rgba(255, 0, 0, 0.5);
}
</style>
</head>
<body>
<div style="width:500px">
<div class="left" style="width:200px;height:150px">1</div>
<div class="right" style="width:50px;height:150px">2</div>
<div class="right" style="width:50px;height:100px">3</div>
<div class="left" style="width:150px;height:50px">4</div>
<div class="right" style="width:150px;height:70px">5</div>
<div class="left" style="width:150px;height:50px">6</div>
<div class="left" style="width:150px;height:50px">7</div>
<div style="height:30px;overflow:hidden;background:skyblue">ABCDEFG</div>
<!-- div8 -->
</div>
</body>
</html>
新たなBFCを創出し、FLOAT領域を除く部分とし、
overflow:hiddenに抜かれることは見られないため、この部分はABCDEしか存在しない.整理する
同じBFCに対して保護されていない(オーバーラップ表示)
IFCの場合、保護が存在します.(ある領域を超える場合、TEXTは、上述のように他の可能な領域に送信される)
1)visibleは通常、書いていないことに等しい.
2)autoは、コンテンツボックスの高さを超えると自動的にスクロールバーを作成します.
3)スクロールバーは常にスクロールバーに取り付けられている.
4)hiddenはスキップした部分を見せず、
NORMAL FLOWで形を描く
FLOATで左右に置きます.
これをBFCに変換してオーバーラップ部分が存在する.
IFC形式で存在し、INLINE-GARDはFLOATには存在しない.
したがって、領域間IFC形式のTEXTが存在する場合、それは可能な利用可能な空間の下に移動される(上記の第1の場合)
このBFCをoverflowhiddenのような属性を付与すると、新しいBFCが出現し、重複する部分が互いに領域を侵さないようにし、INLINE-GARDが自動的に発生して領域を超えたIFC形式のTEXTが存在しても、下の利用可能な空間に下がることなく、スキップした部分TEXTを無視して元の位置に保持する.(2つ目の場合)
NORMAL FLOW VS NORMAL FLOW NORMAL FLOW BFC VS FLOAT=>オーバーラップ部分の存在NORMAL FLOW IFC VS FLOAT=>重複して領域を超えない場合は、他の利用可能な領域に移動できます.NORMAL FLOW BFC OVERFLOW HIDDEN VS FLOAT=>オーバーラップ部分Xの存在領域
NORMAL FLOW IFC OVERFLOW HIDDEN VS FLOAT=>を超えた場合、他の利用可能な領域を超えたTEXTのみが保持されるReference
この問題について(コードSpitz cssは第2部を呈する(ステップ37フィードバック)), 我々は、より多くの情報をここで見つけました https://velog.io/@khw970421/코드스피츠-css-rendering-part2-step-37-피드백テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol