エスカレーターに乗って説明されるCSSフロート

エスカレーターに乗ったことがあれば、フロートをすぐに理解できます。

あなたの

はほぼ完璧です。いくつかの要素間の関係を修正するために、いくつかのフロートを導入することにしました。

次に知っているのは、新しく浮かんだ要素が慎重に選択した順序から飛び出し、磁石のようにdivの側面にくっつくことです。 「意図しない動作」というフレーズが思い浮かびます。

私は個人的にフロートを完全に理解しようとして何時間も費やしました。私は記事を読んで、「ああ、これは理にかなっています!」と言いました。それから、コードに戻り、試してみて…失敗します。ふりだしに戻る。

この運命をspareしまないように最善を尽くします。

フロートは代替フローを作成します。これは理解が最も難しい部分です。そして、それらを導入したら、最大3つのフロー(通常、左、右)を占めるようにコードを記述する必要があります。これは、要素の幅や位置の操作とは対照的に、まったく新しいルールのセットです。

実際、フロートはエスカレーターに乗るときのダイナミクスに非常によく似ているため、div内で明確な関係を作成するために、clearプロパティと一緒にフロートを使用する方法を示します。この方法では、次回コードでフロートを使用しようとしても、驚くことはありません。

パスレーンを尊重する必要があります

要素のデフォルトのフローは、上の図のようなものです。手すりに手を置いて真ん中に立っている人がいます。彼はエスカレーター全体を独占しています。誰も彼を渡すことができません。エスカレーターのエチケットはかなり貧弱です。

彼は同じことをしている多くの人々の後ろに立っているので、誰も彼らを渡すことができません。車線や基本的な人間の良識という概念はありません。

これは、フロートをまったく使用していない場合のシナリオです。

よし、今話している!ある程度の意識を示している人々。それを見るのが大好きです。

左側に1つのレーンが形成され、右側に別のレーンが形成されています。他の人は、静止している2人の人の周りを簡単に動き回り、必要に応じてより迅速にエスカレーターを上ることができます。誰もが真ん中に立ってフローをブロックしていません。

これは、divでfloatを使用する場合のシナリオです。左フローと右フローがあり、フロートされていない要素は、フロートされた要素が使用しないスペースを簡単に埋めることができます。

フロート:左と右

フロートを使用すると、最大2つの新しいフロー(左と右)を導入できます。

これにより、フロート値を持たない要素の通常のフローが、これらの要素の周囲のスペースを埋めることができます。

フロートを使用すると、フロー間にこれらの新しい関係を作成できます。

エレベーターの中央に1列の人が立っていた場合、新しい構造物の選択肢は限られていました。しかし、左右の列がある場合、突然特定の人が右側に立ち、他の人が左に残り、別のグループが隙間を埋めることができるように指定できます。

これにより、フロートプロパティは周囲の要素との要素の関係も示すため、より読みやすく理解しやすいコードを作成できます。

クリアプロパティ

まだ説明していないもう1つのしわがあります。それは、クリアプロパティです。 「クリア」を使用すると、エレメントは、フロートされたエレメントと比較して整列する場所を指定できます。

「フロート」セクションの最初の写真では、2人のエスカレーターライダーがエスカレーターの両側に丁寧に立っていました。これにより、他の人がそれらを通過し、希望どおりに自由に移動できます。

1つのフロートされた左要素と1つのフロートされた右要素の代わりに、3つのフロートされた左要素と1つの右要素があったとします。 3つのフロートした左要素は、「clear:left」プロパティも指定すると、左の行に積み重ねられます。しかし、フロートされた右の要素と水平方向に並んでいる場合、通常の要素の流れが通過するのが非常に難しく、さらには不可能になる可能性があります。

「Clear:left」は、左に浮かぶ各人に、左に浮かぶ最初の要素の後ろに自分自身を配置するよう指示します。下の2人のサイズによっては、通常の要素が右上のスペースを押しつぶして占有するのが難しい場合があります。そのため、適切なエスカレーターの実践でさえ、依然として閉塞につながる可能性があります。

clearプロパティの最も頻繁な使用の1つは、「clear:both」です。これにより、右、左、通常のフローを維持し続けるのではなく、要素のフローをリセットできます。エスカレーターでスーツケースを持ってきてスペース全体を占有する男のようなものです。

「clear:both」では、その男がスーツケースの向きを変えて立っているかどうかは関係ありません。誰が彼の左または右に立っているかは関係ありません。彼はまだエスカレーター全体をブロックしています。彼の後を追う人は、要素の新しいフローを開始する必要があります。これには、左、右、または通常の3つのフローのいずれかを含めることができます。

彼は3フローシステムから脱出し、ルールをリセットしました。エスカレーターを走らせたい人に悪いですか?確かに。しかし、誰かが通り抜けるのを止めたい場合は良いことです。

これが、同じことをしている人々の列の後ろにある、エスカレーターの真ん中に立っていた最初の紳士とどのように違うかに注目してください。それはワンフローシステムでした。 「クリア:両方」は、最大3つのフローが存在する可能性があることを認め、後続の要素の通過をブロックします。

この投稿を楽しんだ場合は、ポジショニング、Model-View-Controller、コールバックなど、挑戦的なCSSおよびJavaScriptトピックに関する他の説明もお楽しみいただけます。

そして、これがあなたと同じ立場の他の人々を助けるかもしれないと思うなら、それを「心」にしてください!

この投稿はもともとCodeAnalogiesブログに掲載されていました。