Float_html/css_WEB-ITnose についてどのくらい知っていますか?

問題の作成

簡単な例から始めましょう:

<div class="parent">    <div class="child-left"></div>    <div class="child-right"></div></div>

.parent { width: 200px; margin: 30px auto; border: solid 5px #3498db;}[class^='child'] { opacity: 0.8;}.child-left { float: left; height: 100px; width: 120px; background: #2ecc71;}.child-right { float: right; height: 100px; width: 80px; background: #e74c3c;}

効果はおおよそ次のとおりです: (透明度の設定はデモンストレーションのためだけです)

確認できる効果は、親要素がラップされていないことと、2 つの要素がラップされていないことです。子要素は浮動小数点であり、それ自体の高さは 0 です。

多くのフロントエンド ユーザーはこれに混乱していると思います。なぜすべての子要素がフローティングになり、親要素の高さが 0 になるのでしょうか。 floatをクリアするにはclear:bothを使用できると言われていますが、親要素に追加しても効果がないのはなぜですか? Google と Baidu で検索した結果、解毒剤であるクリアフィックスを見つけました。

clearfix とは

.clearfix は多くのフロントエンド開発者にとって必須のパッチと言えます。これを使用してフロートを閉じ、親要素の高さの崩壊の問題を修正できます。

.clearfix:before,.clearfix:after { content: "";  display: table;}.clearfix:after { clear: both;}.clearfix { zoom: 1; /* ie 6/7 */}

使用法。引き続き上記の例を使用します

<div class="parent clearfix">    <div class="child-left"></div>    <div class="child-right"></div></div>

Clearfix クラス名を親要素に追加するだけで完了です。

投げるのが好きな生徒は、次の属性のいずれかを親コンテナに追加すると同じ効果が得られることを知っておく必要があります

overflow: auto;display: table;position: absolute;float: left;

舞台裏で何が起こったのでしょうか？疑問を念頭に置きながら、いくつかの新しい用語の学習を続けてください。

Clear float または close float?

これは、clear 属性の名前のせいかもしれませんが、正確には、clear float は、clear: left| に相当します。 right|both|none|inherit; 上記の例では、フローティングの影響を軽減するためにフローティング要素を閉じる必要があり、それらはクローズドフローティングの範囲内に収まる必要があります。

— あの頃一緒にクリアしたフロート

ドキュメント フロー

私がフロントエンドに触れたときから、私が聞いたのはドキュメント フロー、ドキュメント フローだけでした, しかし、本当の名前は ノーマルフローまたはノーマルフロー（英語：normal flow）と呼ぶべきです。私の理解では、HTMLタグの位置順に従って、要素を上から小さく、左から右に1行ずつ配置する処理です。

css2.1 では、次の 3 つの w3c-positioning スキームが言及されています:

>

1. 通常のフロー (ブロックを含む) ブロックの書式設定レベル ボックス、ライン レベル ボックスのライン フォーマット、ブロック レベル ボックスとライン レベル ボックスの相対的な位置。
2. フローティング フローティング モデルでは、まず通常のレイアウトに従ってボックスが配置され、その後レイアウト フローから外されて、可能な限り左右にオフセットされます。他のコンテンツをフロートの周囲に配置できます。
3. 絶対配置 絶対配置モデルでは、ボックスはタイポグラフィ フローから完全に切り離され (後続の兄弟には影響を与えません)、ボックスを含むブロックに対する相対的な位置を指定します。 (絶対、固定を含む)

したがって、フロートも通常の流れから外れますが、より「特別な」ブレイクになります。他のコンテンツもフローティング要素と親要素を囲みます。現時点ではその存在を感知できません。

BFC

BFC は Block Formatting Context の略で、多くの人は文字通りそれを Block Formatting Context と呼んでいます。これは CSS2.1 仕様によって定義されており、ページの CSS 視覚レンダリングの一部であり、ブロック ボックスのレイアウトとフローティング インタラクションの範囲を決定するために使用される領域です。簡単に言うと、BFC は要素の配置とその兄弟との相互作用に影響を与える属性です。

作成

次の状況では、新しい BFC が生成されます:

• ルート要素またはそれを含む他の要素
• Float(要素の float Not none)
• 絶対配置要素 (要素の位置は絶対または固定)
• inline-blocks (要素の表示: inline-block)
• テーブルセル Cell (要素の表示) : table-cell、HTML テーブル セルのデフォルト属性)
• テーブル タイトル (要素の表示: table-caption、HTML テーブル タイトルのデフォルト属性)
• オーバーフローの値は表示用ではありません要素
• フレックス ボックス (要素の表示: flex または inline-flex)

range

BFC には、コンテキスト要素の子要素を作成するすべての要素が含まれますが、新しい BFC の子である内部要素。

特徴

BFC の最も重要な効果は、隔離された空間を確立し、空間内外の要素間の相互作用を隔離することです。もちろん、他にも多くの機能があります:

• 内部ボックスは垂直方向に次々と配置されます (BFC 内の通常のフローとみなすことができます)。同じ BFC 内の要素が相互作用し、マージンの崩壊が発生する可能性があります。 >
各要素のマージン ボックスの左側は、コンテナ ブロックの境界ボックスの左側に接しています (左から右の書式設定の場合、それ以外の場合はその逆です)。これは、フロートがある場合にも当てはまります。
BFC はページ上で独立したコンテナーであり、コンテナー内のサブ要素は外部の要素に影響しません。また、その逆も同様です。 BFC の高さ BFC に含まれるすべての要素を考慮する場合、浮動要素も計算に含まれます。
• 後、浮動ボックス領域は BFC に重畳されません。これを見て、前に戻って考えてください。 いくつかの小さな質問:
• 問題は解決しました

なぜ崩壊したのですか?

なぜ崩壊したのですか? float は通常のフローから離れて新しい BFC を作成します。親要素には BFC を生成する条件がないため、その高さは 0 です。

どうやって解決しますか?

BFC の特性を理解することで、BFC にはそれに含まれる浮動要素の高さ、つまり閉じた浮動要素の高さが含まれることがわかります。 overflow: auto を例に挙げます。overflow: auto は float を閉じませんが、overflow: auto は新しい BFC を作成して、浮動要素が他の要素に侵入するのを防ぎます。

クリア: 親要素の両方が機能しない?

これは意味上の誤解と見なされるべきです。clear は、両方の側に浮動要素が存在しないことを意味するため、「浮動すると高さが崩れる」という意味です。親要素は通常、フローティング要素の下に配置され、親要素がフローティング要素を包み込むように拡張されます。

推奨読書

あの頃一緒にクリアしたフロート

ブロックの書式設定コンテキスト (BlockFormattingContext) の学習

フロートのすべて
Stackoverflow what-does-the-css-rule-clear-both-do
Stackoverflow how-does-the-css-block-formatting-context-work
http: / /fuseinteractive.ca/blog/ Understanding-humble-clearfix#.VvjnPRJ94Wo
ブロック フォーマット コンテキスト (ブロックレベルのフォーマット コンテキスト) を詳しく説明します
• ナンセンス
個人的には、このような質問はBATの面接で必ず得点すべき質問だと思います。それに答えられないのであれば、バイ・フメイと結婚してもあなたには何の関係もないと思います。

以前は、早く太る方法ばかり考えていて、なかなか落ち着かないのですが、これは基礎が弱い証拠です。

補足: 記事を書くのは、自分の復習と要約を容易にするためであり、また、文書を書く能力を練習するためでもあります。 ~ したがって、私たちを読むことはお勧めしません。記事に問題が発生した場合は、Google にアクセスするか、w3c ドキュメント、またはその他の保証された Web サイトを読むことをお勧めします。ファーストフードは一時的には良いですが、欲張らないでください。