ホームページ >ウェブフロントエンド >フロントエンドQ&A >css floatとは何ですか
css floatとは何ですか
- 青灯夜游オリジナル
- 2021-04-02 17:17:442021ブラウズ
CSS におけるフローティングとは、要素をドキュメント フローから取り出す方法です。フロートの値に応じて要素を左右に移動し、周囲の要素も再配置されます。外側の端を、それが含まれているボックスまたは別のフローティングボックスの境界に達するまで押します。
このチュートリアルの動作環境: 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 ビデオ チュートリアル )
要素のフローティング特性:
1. フローティング要素は、標準のドキュメント フローから離脱し、ブロック レベルの要素とインライン要素の制限を取り除きます。
2. フローティング要素には、互いにくっつく効果があります。幅が十分ではない場合、エラー メッセージが表示されます。自動行折り返し
3. フローティング要素は標準のドキュメント フローから分離されていますが、テキスト フローから分離されておらず、単語で囲まれているように見えます。
フローティングによる結果:
(1) フローティング要素はドキュメント フローの外にあるため、親要素の高さを拡張できず、要素に影響を与えます。親要素と同じレベル
# (2) フローティング要素と同じレベル フローティング要素はドキュメント フローから離れ、元の位置を占めないため、非フローティング要素が続きます(3) フローティング要素が最初のフローティング要素でない場合は、その前の要素もフローティングにする必要があります。そうしないと、ページ の構造表示に影響を与えやすいため、フローティング要素はフローティング要素になります。クリアする必要があります。では、フロートをクリアするにはどうすればよいでしょうか?推奨読書「CSS のフローティングをクリアするには?」 3 つの方法の紹介>>
プログラミング関連の知識については、プログラミング ビデオをご覧ください。 ！
以上がcss floatとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。