CSSでfloatを設定する方法

醉折花枝作酒筹
リリース: 2023-01-05 16:10:17
オリジナル
8643 人が閲覧しました

CSS では、float 属性を使用して float を設定できます。要素に「float:left|right|none」を設定するだけで済みます。ここで、left は左へのフローティングを意味し、right は右へのフローティングを意味します。 right、および none は、要素がフローティングされず、テキスト内に表示される場所に表示されることを意味します。

CSSでfloatを設定する方法

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

フローティングは、CSS の float 属性を通じて設定できます。 float 属性は、要素がどの方向に浮くかを定義します。歴史的に、このプロパティは常に画像に適用され、テキストが画像の周りを回り込むようにしていましたが、CSS では任意の要素をフローティングにすることができます。フロート要素は、要素のタイプに関係なく、ブロック レベルのボックスを作成します。

float 属性:

非置換要素が浮動している場合は、明示的な幅が指定されますが、そうでない場合は、可能な限り狭くなります。

注: 行上に浮動要素用のスペースがほとんどない場合、要素は次の行にジャンプし、特定の行に十分なスペースができるまでこのプロセスが続きます。

float 属性の可能な値:

  • left 要素は左にフロートします。

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

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

css フローティング設定例:

<html>
<head>
<style type="text/css">
img 
{
float:right
}
</style>
</head>

<body>
<p>在下面的段落中,我们添加了一个样式为 <b>float:right</b> 的图像。结果是这个图像会浮动到段落的右侧。</p>
<p>
<img  src="猫/images/1.jpg"    style="max-width:90%"/ alt="CSSでfloatを設定する方法" >
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
这是一段文字。这是一段文字。这是一段文字。
</p>
</body>
</html>
ログイン後にコピー

実行結果:

CSSでfloatを設定する方法

フローティング ボックスは、そのままにすることも、そのままにすることもできます。左 外側の端が、含まれているボックスまたは別のフローティング ボックスの境界線に触れるまで、右に移動します。フローティング ボックスはドキュメントの通常のフローにないため、ドキュメントの通常のフロー内のブロック ボックスは、フローティング ボックスが存在しないかのように動作します。

フローティングの利点は、もちろんレイアウトです。フローティングして 3 列レイアウトを形成したり、テキストを折り返したりすることができます。しかし、フローティングには高さが崩れるという問題もあり、上図のように親要素の高さが崩れ、フローティングの子要素が折り返されず、レイアウトエラーが発生します。

推奨学習: css ビデオ チュートリアル

以上がCSSでfloatを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート