HTMLの高さ崩れの問題を解決する方法

この章では、HTML の高さが崩れる問題を解決する方法を紹介します。困っている友人は参考にしていただければ幸いです。

#高さの崩壊の問題: #要素の BFC がオンになると、要素は次の特性を持つようになります:
1 親要素 垂直方向のマージンは子要素と重なりません

BFC が有効になっている要素はフローティング要素で覆われません

BFC が有効になっている要素にはフローティング子要素を含めることができます

それでは、どのようにするか要素BFCを開くには?

要素の float を設定します。 要素の絶対位置を設定します。
要素を inline-block に設定します。

float:left; (悪い) 親要素は引き伸ばすことができますが、親要素の幅が失われ、このメソッドを使用すると、下位の要素が上に移動します。

display:inlink-block; レイアウトは準備できましたが、幅がなくなっています。ただし、幅が失われる可能性があるため、この方法はお勧めできません。

要素のオーバーフローの非表示値を設定します:

overflow:auto; 副作用を最小限に抑えて、親要素の高さの崩壊の問題を解決します。

互換性

IE6 には BFC はありませんが、hasLayout と呼ばれる別の暗黙的な属性があります。

この属性の機能は、IE6 の BFC と似ています。ブラウザーは hasLayout をオンにすることで問題を解決します。

方法:

要素のズームを 1 に設定します:zoom:1

IE6 では、要素に幅が指定されている場合、デフォルトで有効になります

hasLayout.

clear: Both 最も大きな影響を与える要素のフロートをクリアします

高崩壊ソリューション 2 に対する解決策

## 折りたたまれた親要素の末尾に空の div を直接追加できます。 この div はフローティングではないため、親要素の高さを拡張できます。 その後、クリアしてフローティングにすることができます。この空の div を使用して親要素の高さを拡張すると、基本的に副作用はありません。

問題は解決できますが、ページに冗長な構造が追加されます。

after 疑似クラスを使用してブロック レベルの要素として設定し、両側のフロートをクリアして親クラスの崩壊の問題を解決します。

after 疑似クラスを通じて、クラスで、box1

.box1:after{
         content:"";
         display:block;
         //清除两侧的浮动
         clear:both;
}
 /* IE6不支持伪类。  zoom:1;*/
.clearfix:after{
         /*添加一个内容*/
         content:"";
         /*转换为一个块元素*/
         display:block;
         /*清除两侧的浮动*/
         clear:both;
     }
 /*在IE6中不支持after伪类，
     所以在IE6中还需要使用hasLayout来处理*/

     .clearfix{
         zoom:1;
     }

# の後ろを選択します。 ##IE6 では、上記がインライン要素の場合、フローティングになりません。

最終バージョン:

//修正されたclearfixは多機能です
/ / 高さの崩れを解決するだけでなく、親要素

と子要素の垂直方向のマージンが重なるようにすることもできます

rreee

以上がHTMLの高さ崩れの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。