css - divのフローティングコンテンツ、divを混乱させる（CSSの問題）

Question

答えを探しましたが、見つからないようです。私は少し奇妙な問題を抱えています、私は前にそれに遭遇したことがありません。ここにリンクがあります

私headerの中に、私は持っていますdiv id="topHeader"、そしてこの中に私は持っていdiv class="contentArea"ます。

topHeaderとの、とfloat、の幅とwidth100%background-colorcontentArea990pxmargin: 0 auto;

contentAreaフロートがあるものはすべて混乱します（contentAreaたとえば、上部と下部にパディングを適用したいのですが、上部にcontentArea適用してコンテンツを押し下げるだけのようです。

同じ問題がフッターでも発生していcontentAreaます。Firebugを使用するとはっきりとわかります。

返信ありがとうございます。

score 0 · Accepted Answer

それが必要かどうかわからない場合は、次を追加してみてください。#topHeader .contentArea {overflow:hidden;}

score 0 · Accepted Answer

要素をフロートすると、親コンテナはフロートされた子要素をラップしません。この場合、このような clearfix を追加する必要があります

.group:before,
.group:after {
    content: "";
    display: table;
} 
.group:after {
    clear: both;
}
.group {

}

これを css に追加してから、フローティングの子を持つすべての要素にクラスグループを追加します。この clearfix は、すべてのブラウザ間で完全な互換性があります。

score 0 · Accepted Answer

float: left;ですべての要素から削除しwidth: 100%;ます。

次に、すべての浮動要素<div class="clear"> </div> の末尾に / を追加します。

.clear {
 clear: both;
}

3 に答える 3