css - div に浮動子 div を強制的に含める

Question

Wordpress で Twentyeleven テーマをカスタマイズしようとしています。次のように設定された 2 列のレイアウトがあります。

<div id="main">
     <div id="primary"></div>
     <div id="secondary"></div>
</div>

と

#main {
    clear: both;
    padding: 1.625em 0 0;
}
#primary {
    float: left;
    margin: 0;
    width: 100%;
}
#secondary {
    float: right;
    margin-right: 7.6%;
    width: 18.8%;
}

私が認識していない他の関連する css プロパティがあるかどうかはわかりstyle.cssません。とにかく、子 div は outside にあり#mainます。に子 div を強制的に含めるにはどうすればよい#mainですか? （の幅を減らすことは別として#primary、私には何の影響もありません）

Answer 1

overflow: autoに追加する必要があります#main:

#main {
    clear: both;
    padding: 1.625em 0 0;
    overflow: auto;
}

Answer 2

あなたの場合、クリアは実際には子の後に適用されないため、疑似要素 :after で clearfix メソッドを使用する必要があります。

#main:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0; 
}

http://jsfiddle.net/zfsjb/

編集 2020:

しばらくしてから、このより単純なソリューションは問題なく機能します。

#main::after {
    content: "";
    display: table;
    clear: both;
}

また、他の疑似要素と一致させる::after代わりに使用することをお勧めします。:after

Answer 3

に与え width: 100%; position:absoluteてみてください#main。

これが実際のライブデモです

Answer 4

場合によっては、親要素に min-height を適用するだけで済みます