ホームページ > 記事 > ウェブフロントエンド > CSSの浮動属性floatの使い方を詳しく解説【コード例】
CSSの浮動属性floatの使い方を詳しく解説【コード例】
- 藏色散人オリジナル
- 2018-08-29 15:36:297115ブラウズ
ページをレイアウトするときは、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 サイトの他の関連記事を参照してください。