2016-08-16 7 views
0

私のoverflow: hiddenコンテナには、隣接する浮動要素(オレンジ色のボックス)が含まれていません。オーバーフロー:隠しコンテナに浮動小数点の隣接要素が含まれていません

浮遊要素は、コンテナ(セクション)の横にあります。しかし、overflow:hiddenを削除すると、隣接する浮動要素がコンテナの内部に入り、コンテナの浮動小数点子を尊重します。

どうしてですか?それはブロックフォーマットのコンテキストと関係がありますか?

overflow: hidden;をコンテナに適用すると、新しいBFCがトリガされ、その子が格納され、隣接する浮動要素は含まれません。ここで

は、私はあなたがすでにそれがBFCであるという答えを知っていると思いますfiddle

+0

質問は質問自体に**それを再現するために必要な最短のコードを含める必要があります。** NB - **「ドンしてくださいこの要件を回避するためにコードブロックを乱用する**。 –

+0

@Paulie_D申し訳ありませんが、私は新しいSOユーザーです。私は何かを回避しようとしませんでした。それを修正します。 – Limpuls

+0

ようこそスタックオーバーフロー!あなたの質問を編集して段落で分かりやすくすることができました。バッククォートでは、コード(CSSなど)をフォーマットすることができます。ハイパーリンクはハイパーリンクボタンで埋め込むことができます。質問内に関連するHTMLを追加してください(フィドルだけでなく)。がんばろう! – trincot

答えて

1

です。 :)

オーバーフロー(可視以外)を入れると、新しいブロック書式設定コンテキストが作成され、コンテナが隣接する浮動要素に招待されません。

そのため、overflow: hiddenを保管しておくと、オレンジ色のdivがコンテナの横に表示されます。

チェックこのアウト:デバッグの助けを求める

CSS overflow:hidden with floats

BFC info

+0

さて、ありがとう、いくつかの情報ありがとうございます。しかし、なぜオレンジ色の箱がコンテナのそばにうまくいけばいいのか知っていますか?他の要素や何かが重なっていないのはなぜですか?それはセクションの横にあります。 – Limpuls

+0

あなたが 'section'の幅を自動調整するための幅を設定していないので...幅を設定してみてください。 – kukkuz

+0

@Limpulsは好奇心が強いので、これをフォローアップしてください。実用的な状況でこれを使用できるのであれば、調査結果を掲載してください。答えがあなたを助けた場合は、あなたのアップヴォート/回答を受け入れてください。ありがとう! – kukkuz

関連する問題