日付：2020-10-07
著者：19th WY
ラベル：高崩壊問題、解決策1、2、3
1.高い崩壊の問題
- ドキュメントフローでは、親要素の高さはデフォルトで子要素によってサポートされます
- つまり、子要素の高さ、親要素の高さです。
- ただし、子要素にfloatが設定されている場合、子要素はドキュメントフローから完全に外れます。
- このとき、子要素は親要素の高さをサポートできなくなり、親要素の高さが崩壊します。
- 親要素の高さが折りたたまれているため、親要素の下の要素がすべて上に移動し、ページレイアウトに混乱が生じます。
<style type="text/css">
.box1{
/*为box1设置一个边框*/
border:10px red solid;
}
.box2{
width:100px;
height:100px;
background-color: blue;
/*为子元素设置向左浮动*/
float:left;
}
.box3{
height:100px;
background-color: yellow;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
</div>
<div class="box3"></div>
</body>
</html>
したがって、開発では、高さの崩壊の問題を回避する必要があります。崩壊
の問題を回避するために親要素の高さを書き留めることはできますが、高さを書き留めると、親要素
の高さは子要素の高さに自動的に適応しません。このスキームは推奨されません
/*修改上述.box1中代码，加入高度设置*/
.box1{
/*为box1设置一个边框*/
border:10px red solid;
height:100px;
}
2.解決策1：要素のBFCまたはhasLayoutをオンにします
1、ブロックフォーマットコンテキスト（BFC）
- W3標準によると、ページ要素には、Block Formatting Context（略してBFC）と呼ばれる暗黙の属性があります。この属性は、開くまたは閉じるように設定でき、デフォルトで閉じられます。
- 要素のBFCをオンにすると、要素には次の特性があります
。1。親要素の垂直マージンが子要素と重ならない
。2。BFCがオンになっている要素はフローティング要素でカバーされない。3。BFCがオンになっている要素に
はフロートを含めることができる。子要素
2.要素のBFCをオンにする方法：
- 1.要素をfloatに設定します-
このメソッドを使用して開くと、親要素は開くことができますが、親要素の幅が失われ、
このメソッドを使用すると下の要素も上に移動するため、問題を解決できません。 - 2.要素の絶対位置を設定します
- 3.要素をインラインブロックに設定
すると問題は解決しますが、幅が失われるため、この方法はお勧めしません - 4.要素のオーバーフローを非表示の値に
設定する-推奨される方法：オーバーフローを非表示に設定することは、副作用を最小限に抑えてBFCをオンにする方法です。
/*修改上述.box1中代码，加入高度设置*/
.box1{
/*为box1设置一个边框*/
border:10px red solid;
overflow:hidden;
}
3.hasLayout属性
-
BFCはIE6以下のブラウザではサポートされていないため、この方法はIE6と互換性がありません。
-
IE6にはBFCはありませんが、hasLayoutと呼ばれる別の暗黙的な属性があります。
-
この属性の機能はBFCの機能に似ており、IE6ブラウザーはhasLayoutを介してこの問題を解決できます。
-
開く方法はたくさんありますが、副作用が最も少ないものを直接使用し
ます。要素のズームを直接1に設定します。zoom表示放大的意思，后边跟着一个数值，写几就将元素放大几倍 zoom:1表示不放大元素，但是通过该样式可以开启hasLayout zoom这个样式，只在IE中支持，其他浏览器都不支持
/*修改上述.box1中代码，加入高度设置*/
.box1{
/*为box1设置一个边框*/
border:10px red solid;
overflow:hidden;/*为了保持对其他浏览器的兼容性，这句不删*/
zoom:1;
}
3、クリアフローティング
- 現在の要素に対する他の要素の影響をクリアしたい場合は、clearを使用して関数を完了できます
- clearは、現在の要素に対する他のフローティング要素の影響をクリアするために使用できます
- オプション値：
-none、デフォルト値、
unclear float -left、現在の要素
に対する左側のフローティング要素の影響をクリアします-right、現在の要素に対する右側のフローティング要素の影響をクリアします
-両方、現在の要素の両側のフローティング要素をクリアします影響
が最も大きい要素のフロートをクリアする効果
<style type="text/css">
.box1{
width:100px;
height:100px;
background-color: #bfa;
/*设置box1向左浮动*/
float:left;
}
.box2{
width:200px;
height:200px;
background-color:yellow;
/*由于受到box1向左浮动的影响，box2整体向上移动了100px
/*清除box1浮动对box2产生的影响
清除浮动之后，元素会回到其他元素浮动之前的位置*/
clear:left;
float:right;
}
.box3{
width:300px;
height:300px;
background-color:yellowgreen;
clear:both;
}
</style>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
フロートをクリアした後、フロートをクリアする前に
4番目、2番目の解決策：空白のdivを追加します
- 高度に折りたたまれた親要素の最後に直接空白のdivを追加できます
- このdivはフローティングではないため、親要素の高さを伸ばすことができます
- 次に、フロートをクリアして、親要素の高さが空白のdivによって支えられるようにします。
- 基本的に副作用はありません
。この方法で問題を解決することはできますが、ページに構造が追加されます。
<style type="text/css">
.box1{
border:1px solid red;
}
.box2{
width:100px;
height:100px;
background-color: #bfa;
float:left;
}
.clear{
clear:left;
}
</style>
<body>
<div class="box1">
<div class="box2"></div>
<div class="clear"></div>
</div>
</body>
空白のdivを追加した後、空白のdivは追加されません
5、解決策3：疑似クラスの後
- アフター疑似クラスを介して、box1の背面を選択します
- after疑似クラスを使用して、要素の最後に空白のブロック要素を追加してから、floatをクリアできます。
- これを行うことは、同じ効果を達成するためにdivを追加することと同じです。
- また、ページにdivを追加しません。これが最も推奨される方法であり、副作用はほとんどありません。
<style type="text/css">
.box1{
border:1px solid red;
}
.box2{
width:100px;
height:100px;
background-color: #bfa;
float:left;
}
.clearfix:after{
/*添加一个内容*/
content:"";
/*转化为一个块元素*/
display:block;
/*清除两侧的浮动*/
clear:both;
}
</style>
<body>
<div class="box1 clearfix">
<div class="box2"></div>
</div>
afetr疑似クラスを使用する前
：afetr疑似クラスを使用した後：
IE6では疑似クラスがサポートされていないため、IE6ではhasLayoutを使用して処理する必要があります。