技術共有

htmlのフローティング機能を詳しく解説

2024-07-12

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

HTML の「Float」は CSS レイアウト テクノロジであり、元々はテキストを画像の周囲に巻き付けたり、要素を並べて配置するなどの単純なレイアウト効果を実現したりするために設計されました。しかし、Web 開発が進化するにつれて、最新の CSS がより高度なレイアウト方法 (Flexbox や Grid など) を提供しているにもかかわらず、フロートはより複雑なページ レイアウト デザインでも広く使用されるようになりました。

フローティングの基本機能

  1. テキストの折り返し : これは、float の最も独創的で直感的なアプリケーションです。画像 (またはその他のブロック レベルの要素) がフロートに設定されている場合、通常のドキュメント フロー (上から下、左から右) を続行するのではなく、周囲のテキストがその周囲に流れます。

  2. 並べてレイアウト : 複数の要素に float を設定すると、デフォルトでは積み重ねずに並べて配置できます。これは、ナビゲーション バー、画像ギャラリー、または要素を水平に配置する必要があるレイアウトを作成する場合に便利です。

フロートの使い方

  • CSS プロパティ：合格floatフローティング要素のプロパティ。このプロパティは、次のような複数の値を受け入れることができます。left、right、none(デフォルト、フロートなしを意味します) およびinherit(親要素から継承float価値）。

  • 例：

    1. <!DOCTYPE html>  
    2. <html>  
    3. <head>  
    4.   <style>  
    5.     .float-left {  
    6.       float: left;  
    7.       width: 50%;  
    8.     }  
    9.     .float-right {  
    10.       float: right;  
    11.       width: 50%;  
    12.     }  
    13.   </style>  
    14. </head>  
    15. <body>  
    16.  
    17. <div class="float-left">左边的内容</div>  
    18. <div class="float-right">右边的内容</div>  
    19.  
    20. </body>  
    21. </html>

  • この例では、2 つの<div>要素は経由で設定されますfloat: left;そしてfloat: right;並列レイアウトを実装しました。

  • フローティングエフェクト

  • 書類の流れから抜け出す: フローティング要素は通常のドキュメント フローから取り出されます。つまり、フローティング要素は元々占有していたスペースを占有しなくなります。また、他の非フローティング要素はその存在を無視し、それらが残したギャップを埋めます。

  • 後続の要素への影響: フロート要素に続く非フロート要素は、フロート要素によって残されたスペースを埋めようとしますが、フロート要素自体は後続の要素のコンテンツや境界線をカバーしません。

  • クリアフロート: フローティングが後続のレイアウトに与える予期せぬ影響を回避するには、通常、次のようなフローティングをクリアする方法を使用する必要があります。clear: both;属性、疑似要素のクリア、または新しいブロックレベルの書式設定コンテキストの作成 (使用など)overflow: auto;またはdisplay: flex;）。

要約する

フロートは Web 開発における重要なレイアウト技術の 1 つですが、いくつかの複雑さと制限ももたらします。 Flexbox や Grid などの最新の CSS レイアウト テクノロジの出現により、複雑なレイアウトでのフロートの適用は徐々に減少してきましたが、古いブラウザとの下位互換性が必要な一部の単純なシナリオやプロジェクトでは、フロートは依然として便利なツールです。

今後も関連コンテンツを更新し、共有していきます。忘れずに注意してください。

個人プロフィール

彼は 30 年以上テクノロジーの研究に専念しており、java、linux、javascript、php、css などのさまざまな言語に堪能であり、オープンソース分野で多くの貢献を行っています。将来の参考のために技術開発におけるいくつかの問題を共有する開発者ドキュメント ステーション。

プライベートな連絡先の最初の情報

送料