身長崩壊の問題とどのように問題を解決するために、高さが崩壊

      私たちは、ページレイアウト要素がストリームからの文書に記載されています行った場合、問題の高さの崩壊があるでしょう。

まず、崩壊の高さは何ですか?

崩壊の高さであるかを理解するには、次の例によります。

ページ内に配置されたボックスボックスネストされた小さな箱の中にサブエレメント、BOX1ボックスには、高さが設けられておらず、境界線の幅を設定します高さはコンテンツに延伸されます

しかし、我々は内部のボックスにコンテンツを追加したときの<divクラス=「BOX1を」> A </ div> あなたは親要素が軟化さを見つけることができます。

ドキュメントフローの位置では親要素の高さは、伸延高さのデフォルトのキルトの要素です。あの子の高さは要素の親要素の高さです

親要素内のサブ要素は、フローティングに提供されます。例えば、BOX1の設定としてフローティングのまま。あなたは、子要素の場所が変更されていないでしょうが、親要素のボックスの高さの崩壊が発生しました。

結論サブ要素がドキュメントフローから完全されるときに子要素として浮遊するように設定すると、今回は、親要素の子要素になり親要素の高さの崩壊をもたらす、軟化することはできません

ボックスBOX2は、親要素の下に設定した場合、80px高さとBOX2背景色を提供しました。

BOX2に示すように、論理的に、通常の状況下では、文書フローの構成によれば、それは、両方以下、BOX1ボックスの境界線をラップされます。

フロート位置はBOX1を設けた後、BOX1は、文書の流出う崩壊の高さ以上のように、親要素は、次に、表示されます。このとき、BOX2ボックスも混乱のレイアウトを引き起こして、上方に移動します。図に示すように、2つ。

高度塌陷所造成的后果:由于父元素的高度塌陷,就会导致父元素之下的所有元素都会因此而向上移动,这样会导致页面混乱。不利于页面布局

                      


 

 

 

 

 

 

おすすめ

転載: www.cnblogs.com/nyw1983/p/11374358.html