ホームページ >ウェブフロントエンド >CSSチュートリアル >CSSの浮動属性floatの使い方を詳しく解説【コード例】
ページをレイアウトするときは、CSS のフローティング属性をよく使用しますが、これはフロート属性でもあります。そのため、初心者にとっては、この知識ポイントをマスターする必要があります。そうしないと、完全な Web ページを完成させることが困難になります。そこでこの記事では、CSS float 属性の具体的な使い方を詳しく紹介します。お役に立てれば幸いです。
以下、具体的なコード例を通して詳しく紹介していきます
1. CSSの浮動属性-float right属性のコード例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css float right属性使用示例</title> <style> .demo{ width: 500px;height: 400px; background-color: #b2ecef; } img{ width:100px; height: 100px; float: right; } </style> </head> <body> <div class="demo"> <img src="/test/img/1.png" alt="CSSの浮動属性floatの使い方を詳しく解説【コード例】" > <img src="/test/img/2.png" alt="CSSの浮動属性floatの使い方を詳しく解説【コード例】" > </div> </body> </html>
上記のコードでは、float rightのときにdivに2つのimg画像を設定しています。属性が画像に追加されると、効果は図 1 のようになります。
次に、float right 属性を画像画像に追加すると、効果は図 2 のようになります。
I図 1 と図 2 からわかると思いますが、比較するといくつかの変更が見つかりました。図1でCSSのフローティング属性が設定されていない場合、2つのimg画像が同一行に左から右に表示され、2つの画像の間に隙間ができてしまいます。図 2 では、フローティング属性 float right を追加した後、2 つの img 要素がフロート表示され、隙間なく右から左に表示され始めました。この時点でギャップが必要な場合は、padding 属性を使用する必要があります。したがって、CSS フローティング属性 float は、正しい値を設定することで要素を右にフローティングするように制御できることがわかります。
2. CSS フローティング属性 - float left 属性のコード例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>css float left属性使用示例</title> <style> .demo{ width: 100px;height: 100px; background-color: #ccccff; } .demo1{ float: left; width: 100px;height: 100px; background-color: #b2ecef; } </style> </head> <body> <div class="demo"> </div> <div class="demo1"> </div> </body> </html>
上記のコードでは、異なる色で表示される 2 つの div ブロックを設定しています。float 属性が設定されていない場合、効果は次のようになります。図 3:
次に、float left 属性を設定した後、ブラウザーにアクセスすると、その効果は図 4 に示すとおりになります:
図 3 と図 4 を比較すると、明らかに次のことがわかります。デモ 1 要素が左に浮いていることがわかります。同様に、2 つの要素の間にギャップが必要な場合は、padding 属性を通じてそれを実現できます。
要約すると、css float 属性は、任意の要素を左右にフローティングするように制御できます。 css float プロパティは、画像の浮動制御だけでなく、テキストの浮動制御にも使用できます。 [PHP 中国語 Web サイトのオンライン チュートリアルを参照できます: CSS 0 基本入門チュートリアル - CSS Float (Floating)]
この記事には一定の参考価値があり、困っている友人に役立つことを願っています。
以上がCSSの浮動属性floatの使い方を詳しく解説【コード例】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。