BFCと高さ崩壊の問題について
この概念については、おそらく昨年、簡単に記録していましたが、深くは勉強していませんでしたので、印象を深めるためにここに書きます。
BFCとは
ページ内のすべての要素には、BFCと呼ばれる暗黙の属性ブロック書式設定コンテキスト(ブロックレベルの書式設定コンテキスト)があります。
BFCの用途は何ですか? BFCを有効にするにはどうすればよいですか? BFC をオンにするとどうなりますか?
ここでは、最初にいくつかの小さな状況を見ていきます。他にもいくつか質問を投げかけます
(1)
<p class="p1"> <p class="p2">p2</p> <p class="p3">p3</p></p><p class="p4"></p>
.p1{ width: 50px; background-color: #bfc; margin-bottom:50px; } .p2{ width: 50px; height: 50px; background-color: #0000FF; margin-bottom:50px; color: #fff; } .p3{ width: 50px;height: 50px; background-color: #0000FF; margin:50px 0 50px 0; color: #fff; } .p4{width: 100px; height: 100px;background-color: #bfc; }
①見てみましょう、ここに4つのボックスがあります、青は50ピクセルです;
緑のものをペーストしてくださいは親要素p1で、そのmargin-bottomと子要素p3はともに50px
です。親要素と子要素のマージンが重なっており、pの下マージンが一番下にあることがわかります。 100ピクセルではなく50ピクセルです。
②兄弟要素はどうでしょうか? p2とp3の間の距離も50pxなので、それらの間の垂直マージンも折りたたまれています。
それでは、どのような状況で縦マージンの重なりが発生するのかを考えてみましょう。
①まず、どのような場合でも横の余白が重ならないことを明確にし、最初の点は縦になります。
②隣接する、隣接しているとは要素がclear、content、padding、borderで区切られていないことです。 (float をクリアする一般的な方法の原理は、後ほど明確にします)
コードを見ると、p1 と p3、p2 と p3 はすべて隣接関係であることがわかります。そのため、垂直方向の余白が潰れてしまいます。
垂直方向のマージンが重なってはいけないという要件がある場合 (実際にはそのような要件はほとんどありません)、BFC が役に立ちます。まず効果を見てから、その方法について話しましょう。
p1とp3がBFCをオンにした後(p1のオーバーフローは自動または非表示で、p3はフロートになります)、p2とp3の間のマージンが重なるのではなく追加されることがわかります、
p1とp3下余白も切り離します。さらに、親要素で BFC がオンになっている場合、隣接する子要素とのマージンの重なりをキャンセルできます (子要素を開く必要はありません)。隣接する兄弟要素間の効果を示すために、ここでは完全に有効になります。
log Upover in in>> in>>>>>>| 隣接する要素の余白が重なっています。
実際には、隣接する要素のいずれかがBFCをオンにしている限り、もちろんこの場合、フローティングの問題をクリアすることを考慮する必要があります。たとえば、今の例では、p3がオンになります。フローティングですが、p1 が BFC をオンにしません。高度な崩壊が発生しました。
(2) 还是刚刚的例子,把p2和p4去掉,p3开启浮动,此时父元素p1发生高度塌陷
当我们开启p1的BFC后成功解决由于浮动引起的高度塌陷。原理是开启了BFC的元素,其子元素也会参与到高度计算中。
即第二个作用就是避免浮动引起的高度塌陷
接下来来说说如何开启BFC:overflow(非visible)【注意在处理父子外边距折叠时应是父元素开启BFC】、float(非none)、position(非static和relative)、display(inlined-block、table-cell、table-caption)。其中之一即可。
兼容:在ie6中没有BFC,但有hasLayout,与BFC类似。开启:直接将元素的zoom设置为1。 zoom表示放大的意思,后面跟一个数字,即放大倍数。
那么有的时候的需求是父元素不能动overflow,那要解决高度塌陷怎么办,还有另外的清除浮动方案。
挺多的,百度都有,那这里就举一个最常用的例子吧。
.clear:after{ content: ''; clear: both; display: block; }
把这个类添加到高度塌陷的父元素上即可。
这里顺便讲讲这个做法的原理吧。
一个元素开启浮动后,其旁边的留白部分如果够后面的元素补上,后面的元素就会补上,后面的元素(一定要非浮动)加了clear后,就可以清除其周围浮动的效果,使其不会补到上面去,就可以把父元素的高度撑开。
利用这个原理,我们在父元素后面增加一个:after伪元素,让其清除浮动,又不至于补上浮动的留白,从css增加空的content对比直接增加空p的好处就是避免增加多余的dom节点。
以上がBFCと高さ崩壊の問題についての詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

Video Face Swap
完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

人気の記事

ホットツール

メモ帳++7.3.1
使いやすく無料のコードエディター

SublimeText3 中国語版
中国語版、とても使いやすい

ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境

ドリームウィーバー CS6
ビジュアル Web 開発ツール

SublimeText3 Mac版
神レベルのコード編集ソフト(SublimeText3)

ホットトピック











クラスタリング アルゴリズムのクラスタリング効果評価問題には、特定のコード例が必要です クラスタリングは、データをクラスタリングすることによって、類似したサンプルを 1 つのカテゴリにグループ化する教師なし学習手法です。クラスタリングアルゴリズムでは、クラスタリングの効果をどのように評価するかが重要な問題となります。この記事では、一般的に使用されるいくつかのクラスタリング効果評価指標を紹介し、対応するコード例を示します。 1. クラスタリング効果評価指標 シルエット係数 シルエット係数は、サンプルの近さや他のクラスタとの分離度を計算することでクラスタリング効果を評価します。

C++ コードの「error:redefiningofclass'ClassName'」問題を解決する C++ プログラミングでは、さまざまなコンパイル エラーが頻繁に発生します。よくあるエラーの 1 つは、「error:redefiningofclass 'ClassName'」 (クラス 'ClassName' の再定義エラー) です。このエラーは通常、同じクラスが複数回定義されている場合に発生します。この記事では、

Steam は高品質のゲームが数多くある非常に人気のあるゲーム プラットフォームですが、一部の Win10 ユーザーが Steam をダウンロードできないと報告しています。何が起こっているのでしょうか?ユーザーの IPv4 サーバー アドレスが正しく設定されていない可能性があります。この問題を解決するには、Steam を互換モードでインストールし、DNS サーバーを手動で 114.114.114.114 に変更すると、後でダウンロードできるようになります。 Win10 で Steam をダウンロードできない場合の対処法: Win10 では、互換モードでインストールを試みることができます。更新後、互換モードをオフにする必要があります。オフにしないと、Web ページが読み込まれません。プログラム インストールのプロパティをクリックして、互換モードでプログラムを実行します。再起動してメモリと電力を増やす

強力なパフォーマンスと多彩な機能で知られる iPhone は、複雑な電子機器によく見られる、時折起こる問題や技術的な困難を免れません。 iPhone の問題が発生するとイライラすることもありますが、通常は警報を発する必要はありません。この包括的なガイドでは、iPhone の使用に関連して最も一般的に遭遇する課題のいくつかをわかりやすく説明することを目的としています。当社の段階的なアプローチは、これらの一般的な問題の解決に役立つように設計されており、機器を最高の動作状態に戻すための実用的な解決策とトラブルシューティングのヒントを提供します。不具合やより複雑な問題に直面している場合でも、この記事はそれらを効果的に解決するのに役立ちます。一般的なトラブルシューティングのヒント 具体的なトラブルシューティング手順を詳しく説明する前に、役立つ情報をいくつか紹介します。

PHP エラーの解決: 親クラスの継承時に発生する問題 PHP では、継承はオブジェクト指向プログラミングの重要な機能です。継承により、元のコードを変更することなく、既存のコードを再利用し、拡張および改善できます。継承は開発で広く使用されていますが、親クラスから継承するときにエラーの問題が発生することがあります。この記事では、親クラスから継承するときに発生する一般的な問題の解決に焦点を当て、対応するコード例を示します。質問 1: 親クラスが見つかりません。親クラスの継承処理中に、システムが親クラスを見つからない場合、

jQuery.val() が使用できない問題を解決するには、具体的なコード例が必要です フロントエンド開発者にとって、jQuery の使用は一般的な操作の 1 つです。その中でも、.val() メソッドを使用してフォーム要素の値を取得または設定する操作は、非常に一般的な操作です。ただし、特定のケースでは、.val() メソッドを使用できないという問題が発生する可能性があります。この記事では、いくつかの一般的な状況と解決策を紹介し、具体的なコード例を示します。問題の説明 jQuery を使用してフロントエンド ページを開発する場合、時々次のような問題が発生します。

jQueryで要素の高さ属性を削除するにはどうすればよいですか?フロントエンド開発では、要素の高さ属性を操作する必要が生じることがよくあります。要素の高さを動的に変更する必要がある場合や、要素の高さ属性を削除する必要がある場合があります。この記事では、jQuery を使用して要素の高さ属性を削除する方法と、具体的なコード例を紹介します。 jQuery を使用して高さ属性を操作する前に、まず CSS の高さ属性を理解する必要があります。 height 属性は要素の高さを設定するために使用されます

弱教師あり学習におけるラベル取得問題には、特定のコード例が必要です はじめに: 弱教師あり学習は、トレーニングに弱いラベルを使用する機械学習手法です。従来の教師あり学習とは異なり、弱教師あり学習では、各サンプルに正確なラベルが必要ではなく、より少ないラベルを使用してモデルをトレーニングするだけで済みます。しかし、弱教師あり学習では、弱いラベルから有用な情報をいかに正確に取得するかが重要な問題となります。この記事では、弱教師あり学習におけるラベル取得問題を紹介し、具体的なコード例を示します。弱教師学習におけるラベル獲得問題の紹介:
