ATOZ CSSクイックヒント：フロートとクリアとセンタリング要素

SitePoint Premium Membership限定：Complete ATZ：CSSシリーズチュートリアル！

プレイヤーをロードしてください…ATOZ CSSシリーズのチュートリアルへようこそ！この一連のチュートリアルでは、アルファベットの異なる文字から始まるさまざまなCSS値（およびプロパティ）を調べます。この記事では、フロートとクリア属性、およびさまざまな要素センタリング方法に関する簡単なヒント/コースを追加しました。

fはフロートとクリア

を表します

フローティングは、要素をページの左または右に移動する場合に役立ちますが、残念ながらfloat: centerを使用して要素を中央に配置することはできません。とても面倒ではありませんか？心配しないでください、ここにさまざまな要素を中心にする方法があります。

テクニック1

要素がブロックレベルの要素である場合、widthとmargin: autoを組み合わせて使用​​できます。 margin: auto左側と右側のマージンを自動的に計算して等しくし、コンテナ要素内のブロック要素を中心にします。 Codepen：Tip-Margin-AutoでSitePoint（@SitePoint）が書いた例をご覧ください。

テクニック2

要素がインライン（またはインラインブロック）要素である場合、その親コン​​テナにtext-align: centerを使用します。 Codepen：Tip-FlexBoxでSitePoint（@SitePoint）によって書かれた例をご覧ください。

テクニック3

要素が絶対に配置されている場合は、leftおよびtransformを使用して、要素を水平方向に中央に配置します。 Codepen：Tip-FlexBoxでSitePoint（@SitePoint）によって書かれた例をご覧ください。

同様の手法は、垂直センタリング要素にも使用できますが、将来のヒントではさらに紹介されます！

テクニック4

display: flexFlexBoxには、利用可能なスペースを最大限に活用するために、コンテナ要素の栽培または縮小など、他の多くのクールな機能があります。ブロックレベルとインラインの要素を使用せずに、それぞれ垂直または水平方向のアライメントを決定することなく、要素を垂直および水平方向に同時に整列させることもできます。 FlexBoxを使用するもう1つの利点は、コンテナの折りたたみの問題がなく、ClearFixソリューションを使用する必要がなくなったことです。 justify-content: center CSSフロートとクリア

に関するよくある質問

CSSのフロート属性の目的は何ですか？

cssの

属性は、要素を左また​​は右にプッシュするために使用され、他の要素がそれを囲むことができます。これは、画像の周りにテキストをラッピングするなど、Webレイアウト全体またはWebページの特定の部分を作成するために使用できる強力なツールです。ただし、Webページの通常のプロセスからフローティング要素が削除され、適切に管理されていない場合、予期しないレイアウト結果につながる可能性があることに注意する必要があります。

CSSの浮動要素を中心にする方法は？

CSSのフローティング要素のセンタリングは、

属性自体が中心アライメントをサポートしないため、少し難しい場合があります。ただし、これを達成するためのいくつかの回避策があります。一般的なアプローチは、指定された幅とマージンをfloatに設定したラッパーまたは親要素を使用することです。もう1つのアプローチは、FlexBoxまたはグリッドレイアウトを使用することです。これにより、コンテナ内のプロジェクトアライメントとスペース割り当てをより強化します。 auto

CSSの明確な属性の機能は何ですか？

cssの

属性は、clear属性とともに使用されます。要素のどの側面が浮かないようにしていることを指定します。 float属性の値は、clear、none、left、right、both、およびinheritです。このプロパティは、通常、要素が浮遊要素を囲むのを防ぐために使用されます。

なぜ私の浮遊要素が正しく揃っていないのですか？

フローティング要素が予想どおりに整列されていない場合、それはいくつかの理由が原因である可能性があります。一般的な問題は、浮動要素の総幅（マージン、充填、境界を含む）がコンテナ要素の幅を超えることです。別の問題は、すべての要素が同じ方向に浮かんでいるわけではないということです。また、ドキュメントの通常の流れから浮動要素が削除されることを忘れないでください。これは、予期しない結果につながる場合があります。

CSSのフローティングをクリアする方法は？

clear属性を使用して、CSSのクリアフローチをクリアできます。これは通常、コンテナに浮動要素が含まれており、コンテナ内の他の要素が浮動要素を囲むことを望まない場合に必要です。コンテナの端に新しい要素を追加し、clear属性を「両方」に設定することにより、フロートをクリアできます。または、ClearFixハックを使用することもできます。クリアフィックスハックには、コンテナ自体にclear属性を含む擬似エレメントを適用することができます。

float属性をFlexBoxまたはグリッドレイアウトで使用できますか？

FlexBoxまたはグリッドレイアウトを使用してfloat属性を技術的に使用できますが、これは推奨されません。これは、FlexBoxおよびグリッドのレイアウトが、コンテナ内のアイテムのスペースを調整および割り当てる独自のメカニズムを提供するためです。 FlexBoxまたはグリッドのレイアウトを使用している場合は、floatの代わりにプロパティを使用する方が良いでしょう。 float

CSSフロート属性を使用する代替品は何ですか？

属性はCSSの強力なツールですが、より制御と柔軟性を提供するいくつかの選択肢があります。これらには、FlexBox、グリッドレイアウト、CSSポジショニングが含まれます。 FlexBoxを使用すると、コンテナ内のプロジェクトのスペースの簡単なアラインメントと割り当てが可能になりますが、グリッドレイアウトは複雑な2Dレイアウトを作成するのに最適です。 CSSポジショニングは、各要素のレイアウトを制御するためにも使用できます。 float

フロート属性はドキュメントのフローにどのように影響しますか？

要素が浮かぶ場合、ドキュメントの通常の流れから削除され、可能な限り左または右に移動します。ドキュメント内の他の要素は、フローティング要素の周りに流れます。これは、特にフローティング要素がコンテナ要素よりも広い場合、または幅が異なる複数のフローティング要素がある場合、予期しない結果につながる場合があります。

要素を中心に浮かせることはできますか？

CSSの

float属性は、中心アラインメントをサポートしていません。要素が左または右にのみフローチすることができます。ただし、指定された幅とマージンをautoに設定したラッパーまたは親要素を使用することにより、同様の効果を達成できます。または、Alignmentをより多くの制御を提供するFlexBoxまたはグリッドレイアウトを使用することもできます。

フロートをクリアしないとどうなりますか？

フロートをクリアしない場合、予期しないレイアウト結果につながる可能性があります。たとえば、親要素に浮動要素のみが含まれている場合、フローティング要素がドキュメントの通常の流れから削除されたため、崩壊する可能性があります。ドキュメント内の他の要素は、予期しない方法で浮動要素を囲むこともできます。したがって、通常、必要に応じてフロートをクリアすることが最善です。

以上がATOZ CSSクイックヒント：フロートとクリアとセンタリング要素の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。