Float_html/css_WEB-ITnose についてどのくらい知っていますか?-htmlチュートリアル-php.cn

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

WBOY

リリース： 2016-06-21 08:52:49

オリジナル

1232 人が閲覧しました

問題の作成

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

<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 スキームが言及されています:

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

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

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 に重畳されません。これを見て、前に戻って考えてください。いくつかの小さな質問:
問題は解決しました

なぜ崩壊したのですか?

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

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

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

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

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

推奨読書

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

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

ナンセンス

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

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