float属性を使ってdivの左右のフローティングを制御するCSSの詳細解説

この記事では、css に関する関連知識を提供します。主に、div の左右のフローティングを制御する float 属性に関する問題を紹介します。フローティングとは、名前のとおり、浮いていることを意味します。要素がドキュメントフローから切り離され、親要素の上に浮いてしまう現象のことを指しますので、見ていきましょう。

(学習ビデオ共有: css ビデオ チュートリアル、html ビデオ チュートリアル)

一、フロートとは何ですか？

フローティングとは、その名の通り、浮いているという意味です。要素がドキュメント フローから切り離され、親要素の上に浮いてしまう現象を指します。

Css スタイルの float 属性。ラベル オブジェクト (

ラベル ボックス、 ラベル、 ラベル、 ラベル、その他の HTML タグなど) の設定に使用されます。レイアウト、フローティングは、左にフローティング (float:left) および右にフローティング (float:right) するラベル オブジェクトと呼ばれるものです。

要素の水平浮動方向は、要素が左右にのみ移動でき、上下には移動できないことを意味します。

フローティング要素は、その外縁が包含ボックスまたは別のフローティング ボックスの境界線に触れるまで、左または右に移動しようとします。

float 要素の後の要素がそれを囲みます。

フローティング要素の前の要素は影響を受けません。

画像が右にフローティングされている場合、下のテキスト フローは画像の左側に折り返されます。

2. float を生成するにはどうすればよいですか?

要素自体に float 属性を追加します。

float 値:

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

3. フローティングの役割は何ですか?

機能: HTML 文書の流れでは、行要素、ブロック要素、インライン ブロック要素に分割されます。

行要素とインライン ブロック要素は横に配置され、ブロックは要素はフローの形で上から下に配置されますが、ブロック要素を水平に配置したい場合は、float を使用します。

float がブロック レベルの要素に追加されると、次の図に示すように、垂直に配置されるべき要素が水平に配置され始めます。

##css div フローティング他のアプリケーション ケース

DIV CSS 実験 1

Css スタイルのサンプル コンテンツ。テキストと画像を固定幅の div レイヤーに配置し、背景を青色にします。テキストコンテンツは右側に、小さな画像は左側にあります。

www.divcss5.com CSS ケースのデモの最終的なレンダリングは次のとおりです

1. まず、最も外側のレイヤーの幅を次のように設定します。 300px、高さを 200px ボックスという名前の CSS セレクター コードは次のとおりです (ナレッジ ポイント px の意味)

.box {border: 1px solid #666;height: 700px;width: 700px;color: #fff;}
.box1 {float: left; width: 100px; height: 100px; background: #000;}
.box2 {float: left; width: 100px; height: 100px; background: red; }
.box3 {width: 200px; float: left; height: 200px; background: yellow; }
.box4 {width: 300px; float: left; height: 300px; background: blue; }
.box5 {float: left; width: 300px; height: 400px; background: green;}
<p class="box"> <p class="box1"> box1 </p> <p class="box2"> box2 </p> <p class="box3"> box3 </p> <p class="box4"> box4 </p> <p class="box5"> box5 </p> </p>

2. ボックス内のテキスト コンテンツ部分の CSS スタイルを yangshi に設定し、背景を に設定します。青、幅を 120px、右側にフロートします

.box{width:300px; height:200px;}

3. 画像の CSS スタイルを左側の div

.yangshi{ width:120px; float:right; background:#0066FF;}

4 にフロートに設定します。本文内の div レイアウト、コードは次のとおりです

img { float: left;}

説明: ここに img タグがあります。これは外部画像へのリンクであり、画像名はdemo.gifです。

最終的なデモ結果のスクリーンショット

CSS 実験 2

次に、div CSS の使用方法を説明します。ここでは小さな画像を右側に配置できます (前の例は左側にありました)。青色の背景のテキスト コンテンツ領域は左側にあります (前の例は右側) (拡張 CSS 中央)。ここでは、yangshi の float:right; を float:left に変更し、画像の CSS スタイル img { float: left;} を img { float: right;} に変更するだけです。

CSS コードは次のとおりです。

 <div class="box">
<div class="yangshi">我是www.divcss5.com 网站，测试内容</div>
<img  src="/static/imghw/default1.png"  data-src="demo.gif"  class="lazy"   / alt="float属性を使ってdivの左右のフローティングを制御するCSSの詳細解説" >
</div>

css コードと html のコンテンツは変更されません。

最終的なデモ結果のスクリーンショットは次のとおりです。

上記のとおりであることを願っています2 つの CSS 例は、 float を理解するのに役立ちます。ぜひ皆さんも実践してみてください！

css フローティングの概要

テキスト コンテンツの左スタイル (text-align:left) と右スタイル (text-align:right) を区別する必要があります。フローティングは HTML の場合にのみ左に設定されます。タグ。右のフロート スタイル。 float スタイルには中央揃え (フローティング中央揃え) スタイルがありません。ラベル オブジェクトを中央揃えにする必要がある場合は、CSS レイアウトの中央揃えに関する本文 (CSS マージン) で詳しく説明します。ここで、右にフローティングする場合は float:right を使用し、左にフローティングする場合は float:left を使用することを忘れないでください。

(学習ビデオ共有:

css ビデオ チュートリアル

、

html ビデオ チュートリアル

)

##left	要素は左側にフローティングされます。
デフォルト値。要素はフロート表示されず、テキスト内のどこにでも表示されます。
float 属性の値を親要素から継承することを指定します。

以上がfloat属性を使ってdivの左右のフローティングを制御するCSSの詳細解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。