フロートの浮き上がりについての簡単な説明

Float は、おそらく CSS3 より前の Web ページ レイアウトで最も一般的に使用される属性です。お互いに同意しない場合にフロートするコードをよく見かけます。そこで、半分天使で半分悪魔であるこの属性について詳しく掘り下げてみましょう。

この記事は、MOOC.com のマスター、Zhang Xinxu のフロート ビデオ (ビデオ アドレス: http://www.imooc.com/learn/121) を読んだ後の要約と拡張された使用法です。このビデオは、最初に読んだときは退屈ですが、注意深く読んだ後はさらに退屈であることがわかります。 。 。 。 。 。しかし、落とし穴に遭遇した後にもう一度読むと、一言一言が貴重な良心のビデオに出会うでしょう。さっそく始めましょう:

1.フロートの由来

フローティングのオリジナルデザインは、デザイナーが私たちに望んでいたテキストの回り込み効果を生み出すために使用されました。

2.floatパラメータ

float属性には3つのパラメータ値があります:

左：要素が左に移動することを示します。

right: 要素が右に移動することを示します。

none: オブジェクトはフローティングせず、標準のドキュメント フローに従います。

3.エフェクト表示 (float:leftを例にします。float:rightの場合は位置の違いだけです)

リーリー

ブラウザの幅が足りない場合:

ブラウザの幅が十分に長い場合:

次の結論を導き出すことができます:

フローティング要素がブロック要素の場合、その次に隣接する要素 (フローティングではない) はフローティング要素と重なり、フローティング要素はその上になります。次に隣接する要素がインライン要素の場合は、フローティング要素の後に続きます。

フロート要素がインライン要素の場合、ブロック要素であれば次に隣接する要素（非フロート要素）は移動しませんが、幅が足りないと重なりが発生します。次に隣接する要素がインライン要素の場合は、フローティング要素の後に続きます。

4.浮遊する破壊力

フロートに設定された要素はドキュメント フローから切り離され、その親要素の高さが「折りたたまれ」ます。

リーリー

リーリー

5.フローティングラッピングプロパティ

これはfloatのないdivです

これはfloatを使用したdivです

6。スペースを削除するにはフロートします

。

これは上記のコードと結論で示されました。簡単に言うと、通常のドキュメントフローでは、デフォルトで上下だけでなく2つのインライン要素の間にも隙間が生じますが、この隙間をクリアして2つの要素をシームレスにすることができます。合わせて上下の差も解消されます。

7.フローティング効果をクリアする

7.1 clear属性を使用する

a. <div style="clear:both;"></div>を最後の子タグとして配置し、親タグと一緒に配置することもfloatをクリアする最も簡単な方法ですが、お勧めできません。

リーリー

疑似要素とズーム後

Afterはタグの最後の子要素の終わりを指します。したがって、CSS コードを使用して明確な属性を持つ要素を生成できます

リーリー

ただし、IE6/7 はその後の疑似要素を認識できないため、次のようにズームを使用する必要があります。 リーリー

リーリー

これはフロートのレイアウトとそれをクリアすることの影響に関するものです。欠落や間違いがあれば修正してください。次のセクションで、BFC とは何か、BFC がどのようにレイアウトされるのか、そしてなぜそうなるのかを見てみましょう。フロートをクリアするために使用されます。