CSSの浮動属性floatの使い方を詳しく解説【コード例】-CSSチュートリアル-php.cn

ホームページ

ウェブフロントエンド

CSSチュートリアル

CSSの浮動属性floatの使い方を詳しく解説【コード例】

藏色散人

Aug 29, 2018 pm 03:36 PM

ページをレイアウトするときは、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="/static/imghwm/default1.png"  data-src="/test/img/1.png"  class="lazy"   alt="CSSの浮動属性floatの使い方を詳しく解説【コード例】" >
    <img  src="/static/imghwm/default1.png"  data-src="/test/img/2.png"  class="lazy"   alt="CSSの浮動属性floatの使い方を詳しく解説【コード例】" >
</div>
</body>
</html>

上記のコードでは、float rightのときにdivに2つのimg画像を設定しています。属性が画像に追加されると、効果は図 1 のようになります。

CSSの浮動属性floatの使い方を詳しく解説【コード例】

次に、float right 属性を画像画像に追加すると、効果は図 2 のようになります。

CSSの浮動属性floatの使い方を詳しく解説【コード例】

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:

CSSの浮動属性floatの使い方を詳しく解説【コード例】

次に、float left 属性を設定した後、ブラウザーにアクセスすると、その効果は図 4 に示すとおりになります:

CSSの浮動属性floatの使い方を詳しく解説【コード例】

図 3 と図 4 を比較すると、明らかに次のことがわかります。デモ 1 要素が左に浮いていることがわかります。同様に、2 つの要素の間にギャップが必要な場合は、padding 属性を通じてそれを実現できます。

要約すると、css float 属性は、任意の要素を左右にフローティングするように制御できます。 css float プロパティは、画像の浮動制御だけでなく、テキストの浮動制御にも使用できます。 [PHP 中国語 Web サイトのオンラインチュートリアルを参照できます: CSS 0 基本入門チュートリアル - CSS Float (Floating)]

この記事には一定の参考価値があり、困っている友人に役立つことを願っています。

以上がCSSの浮動属性floatの使い方を詳しく解説【コード例】の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。