3

私の新しいデザインでは、ラッパーを使用していますdiv。私の問題は、ラッパー内の要素が div の外に浮かんでいて、 css-tricks.comのフロートのクリアセクションで説明されている問題が発生したことでした。

追加することでこれを解決しoverflow:hidden、すべて正常に動作します。1つだけ問題があります。ヘッダー ラッパー内に、表示されなくなったドロップダウン メニューがあります。

ドロップダウン メニューはsettingsコンテナ内にあります。

に設定しようとしsettingsまし position: absolute; z-index: 800;たが、役に立ちませんでした。

ラッパーの問題を解決し、ラッパーの外側に特定のアイテムを表示できるようにするにはどうすればよいですか?

彼女は私のフィドルです: http://jsfiddle.net/sXVbT/3/

更新
ブートストラップ css をのぞき見したところ、display:table. これは と同じように機能しoverflow:hiddenます。を使用している空洞はありますdisplay:tableか? そうでない場合、他のすべてのソリューションの代わりにこれを使用していないのはなぜですか?

追加のCSSもあります

.wrapper:before, .wrapper:after {
    content: "";
    display: table;
    line-height: 0;
}
.wrapper:after {
    clear: both;
}
.wrapper:before, .wrapper:after {
    content: "";
    display: table;
    line-height: 0;
}

これは必要ですか？私のフィドルには利点がありません: http://jsfiddle.net/sXVbT/5/。

4

1 に答える 1

2

indisplay: blockの代わりに(ほとんどの場合) で正常に動作します。table .wrapper:after

一般に、人々は css とそのコホートを避ける傾向がありますdisplay: table。なぜなら、彼らは (不当に) 古い「テーブルを使用したレイアウト」地獄の汚名を負っているからです。私は「不当に」と言っていますが、私がそれらを使用することはめったにないことを認めなければなりません. display: table-cellさまざまな副作用がありdisplay: tableますが、それがあるかどうかを判断するのに十分な量を使用していません.

しかしdisplay: table、親要素では（フロートをクリアするという点で）あまり効果がないと確信してい:afterます.jsFiddleのcssの一部を削除すると、Chromeはそれを確認するようです.

それは実際に.wrapper:after仕事をします (ただし、2 つの同一の css ルールは必要ありません):

.wrapper:before,      /* You can leave this out. It prevents top 
                         margin-collapse, and isn't part of the clear 
                         solution itself */
.wrapper:after
{
    content: "";      /* Adds content, so you don't have to.
                         An Opera bug means you may need a space: " " */
    display: table;   /* May be 'block', but if you use 
                         :before, it must be 'table' */
    line-height: 0;   /* Not sure why it would be needed */
}

.wrapper:after {
    clear: both;      /* Does the actual clearing for you */
}

したがって、短いバージョンは次のとおりです。

.wrapper:after {
    content: "";
    display: block;
    clear: both;
}

子要素の上マージンが崩壊しない限り。その場合は、ブートストラップ バージョンを使用します (ただし、行の高さの必要性はまだわかりません)。

.wrapper:before, .wrapper:after {
    content: "";
    display: table;
    line-height: 0;
}

.wrapper:after {
    clear: both;
}

明確にするために、:before 部分が行うことは、このソリューションをまったく同じように機能させることですoverflow: hidden(オーバーフローしたコンテンツが非表示になる不要な部分を除いて)。overflow: hiddenフローティングされていない含まれている要素が上下のマージンを保持できるという利点がありました。他のいくつかの解決策では、これらのマージンが折りたたまれており、コンテナーと浮動小数点以外の子の間にスペースが必要な場合は、代わりにコンテナーにパディングを使用する必要がありました。

この:beforeトリックにより、含まれている非浮動要素が上部マージンを維持できます。パーツは:after、フロートを実際にクリアするだけでなく、下のマージンも処理しています。

于 2013-07-13T15:32:13.647 に答える