css floatとは何ですか-フロントエンドQ&A-php.cn

css floatとは何ですか

青灯夜游

リリース： 2023-01-04 09:34:27

オリジナル

2014 人が閲覧しました

CSS におけるフローティングとは、要素をドキュメントフローから取り出す方法です。フロートの値に応じて要素を左右に移動し、周囲の要素も再配置されます。外側の端を、それが含まれているボックスまたは別のフローティングボックスの境界に達するまで押します。

css floatとは何ですか

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

フローティングは、ドキュメントフローから要素を取り出し、それを左または右に移動し、その周囲に要素を再配置する方法です。

フローティングの意味: フローティング属性が設定された要素は、通常の標準フローの制御から離脱し、親要素で指定された位置に移動します。フローティングは基準の流れから外れます位置を占有せず、基準の流れに影響を与えますフローティングは左右にのみフローティングでき、上下にはフローティングできません

フローティングは、ページ上のオブジェクトが前後に流れる順序を変更できる、非常に便利なレイアウト方法です。これの利点は、コンテンツのレイアウトがシンプルになり、拡張性が高いことです。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<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 floatとは何ですか" >
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
这是一些文本。这是一些文本。这是一些文本。
</p>
</body>

</html>

ログイン後にコピー

css floatとは何ですか