問題タブ [clearfix]

要素に追加float: left;すると、フローから取り出されますよね? そして、私の知る限り、これもposition: absolute;当てはまります。クリアフィックスで浮動要素をクリアできるのに、絶対配置された要素については何もできないのはなぜですか? それぞれがコンテンツ フローから削除される方法の違いは何ですか?

要するに
、基本的に、overfow:hidden が浮動アイテムを含むコンテナーを拡張する理由を知りたいだけです。この画像のようにオーバーフロー要素を非表示にしないでください http://css-tricks.com/wp-content/csstricks-uploads/css-overflow-hidden.png

なぜ代わりにこれを行うのですかhttp://css-tricks.com/wp-content/csstricks-uploads/overflow-float.png

長いバージョン:
非配置、非浮動、ブロック レベルの要素は、浮動要素が他のブロック要素に対してフローから外れているため、浮動要素が存在しないかのように動作します。また、インライン要素は浮動要素をラップして、その存在を認識します。オーバーフロー プロパティがどのように機能し、どこに適用するかを知っています。フロートをクリアするには、オーバーフロー プロパティではなく clearfix を使用するのが最適です (ただし、代わりにオーバーフロー クリアを使用する必要がある場合もあります)。ただし、特にoverflow:hiddenを使用する場合に、親要素が展開される理由はまだわかりません。親要素がオーバーフローした子要素を単に「非表示」にしないのはなぜですか? 結局、オーバーフローを隠していませんか?

そのため、最後の段落が明らかにクリアされておらず、 and の真ん中に滑り込んでいるという問題がh1ありnavます。しかし、段落の前に clear:both プロパティを持つ div を配置すると、機能しているように見えます。

私のフィドルで我慢してください。

• nettuts から学んだ画像置換テクニックを表すために紫色の背景を使用しました。
• clearfix 部分は「group」という名前のクラスで、CSS は一番下にあります。
• display:block;また、レイアウト ブレークからを削除した場合h1 > a、フォローアップの質問は、どの要素をフロートさせる必要があり、どこに clearfix を適用する必要があるかです。

インターネットで見つけたclearfixを使用しましたが、正常に機能していません。

CSS

http://jsfiddle.net/qKFAc

は 2 つの divの.header-nav下にある必要がありますが、それらの下にあります。何が間違っていますか?

ありがとうございました。

clearfix 手法のほとんどは、親コンテナーの一番下に何かを追加することを伴いますが、不要な要素を HTML に追加しないので、私は疑似要素アプローチを最も好みます。

しかし、最近、すべてではなく一部の子がフローティングしているコンテナを扱っていることがわかりました。最初の 2 つの子は、最初のフロートが左に、2 番目のフロートが右にあるとします。2 番目の要素の直後に float をクリアする方法が必要なので、以下のコンテンツがそれらの間に挟まれないようにします。clearfix要素を追加せずに、途中でフローティング要素をクリアする方法はありますか?

以下に例を示します。

HTML

CSS

このjsfiddleを見て、私が今持っているものを確認してください。

Twitter ブートストラップ 3 を使用して、フロート サイドバーと、サイドバーのサイズに対して左余白のあるメイン コンテンツの 2 つの列を持つレイアウトを設計していますが、メイン コンテンツ内のul要素で clearfix クラスを使用すると、 、clearfixクラスのようで、サイドバーをきれいにして（フロートクリア）、ulとその後のコンテンツを押し下げます。

http://bootply.com/97603を参照

HTML

CSS

この動作を修正するにはどうすればよいですか?

2 つの div/列があります。1 つは左にフロートし、もう 1 つは右にフロートしました (私が作成しているレスポンシブ デザイン ページでは、このようにする必要があります)。左の div のコンテンツは、ビューポート/左の div よりはるかに下まで伸びていますが、右のコンテンツは短く、ビューポート/右の div 内に収まっています。

左のdivのコンテンツ（または右のdivのコンテンツが長い場合は右のdivのコンテンツ）の一番下まで拡大するには、背景色が必要です。

代わりに、ビューポートの下部にある背景色/div を切り取っています。clears:both、clearfix、overflow コントロールを試してみましたが、役に立ちませんでした。このセットアップでは、それらを正しく実装していないと思います。誰かが私のフィドルを編集して、それらを一番下まで拡張するために何をする必要があるかを教えてもらえますか?

ここにフィドルがあります（小さなビューポートを下にスクロールして、色がどのようにカットされるかを確認する必要があります）：

http://jsfiddle.net/4C89C/

フィドルで使用しているコードは次のとおりです。