ホームページ >ウェブフロントエンド >CSSチュートリアル >CSS で要素を浮動させるにはどのような属性が使用されますか?

CSS で要素を浮動させるにはどのような属性が使用されますか?

青灯夜游
青灯夜游オリジナル
2021-03-22 10:56:034178ブラウズ

float 属性は、CSS で要素を浮動表示するために使用されます。 float 属性は、要素がどの方向にフロートするかを定義するために使用されます。要素が float 属性を使用した後、要素は標準フロー自体から分離され、他の要素の上にフロートすることができるため、元々属していたスペースを占有しなくなります。ただし、後続の要素が上に移動し、その要素にもともと属していたスペースを占有することになります。

CSS で要素を浮動させるにはどのような属性が使用されますか?

このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

float 属性は、CSS 内の要素を浮動表示するために使用されます。

css float 属性

float は、その名前が示すように、フローティングです。float 属性が設定された要素は、設定に従って左または右にフロートします。属性値. これを設定と呼びます。 float 属性を持つ要素は浮動要素です。

要素が float 属性を使用した後、要素を標準フロー自体から分離し、他の要素の上に浮かせることができるため、要素が元々属していたスペースを占有しなくなります。後続の要素を上に移動してマージします。要素に元々属していたスペースを占有します。

属性値

  • #left 要素は左に移動します。

  • right 要素は右にフロートします。

  • none デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。

float 属性の理解

1. float 属性は、この属性を使用する要素自体と後続の要素にのみ影響します (後続の要素は上に移動します)。フッター ブロックが上に移動しました)。

2. inline 要素は float 属性を使用するとブロックレベルの要素となり、要素の高さと幅を設定できるようになります (A タグを参照)。

3. float 属性は通常、後続の要素に対する float 属性の影響をクリアするために、後続のタグの clear 属性と一緒に使用されます。

4. float 属性を使用する要素の場合、要素の幅が設定されていない場合、要素の幅はコンテンツの幅に合わせて自動的に調整されます (コンテンツ DIV を参照してください。コンテンツ ブロックのサイズは定義されていないため、自動的に調整されます)。

[推奨チュートリアル: CSS ビデオ チュートリアル ]

例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>HTML中文网</title>
<style>
img 
{
	float:right;
}
</style>
</head>

<body>
<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
<p>
<img  src="logocss.gif"    style="max-width:90%"  style="max-width:90%" / alt="CSS で要素を浮動させるにはどのような属性が使用されますか?" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

レンダリング:

CSS で要素を浮動させるにはどのような属性が使用されますか?

プログラミング関連の知識について詳しくは、プログラミング ビデオをご覧ください。 !

以上がCSS で要素を浮動させるにはどのような属性が使用されますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

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